# IBS Member frontend v2 ## Installation ### Prerequisites * **Node.js** - version 8.9 or above (8.11.0+ recommended) * **Git** - you can download from [here](https://git-scm.com/) * **Vue CLI** - version (3.x) * Vue CLI install: `npm install -g @vue/cli` * Version check: `vue --version` ### Git clone * Open a terminal/console window and enter the following command:
`git clone https://github.com/ElkenGit/new-ibs-member-frontend.git` ### After Git clone 1. Right click on the folder and click 'Git Bash Here' 1. Enter the following command: `git checkout master` 1. Copy `.env.example` file and paste the file as `.env.` and update the enviroment variables 1. Delete `package-json.lock` file or `yarn.lock` file 1. Open a terminal/console window for the folder and run `npm install` 1. Run `npm run serve` ___ ## Environment Variable #### Webpack settings Vue application local hosting setting ``` VUE_APP_PORT=8080 VUE_APP_HOST=localhost VUE_APP_HTTPS=true ``` ### API settings Change application backend URL based on needs: * Staging [UAT] -> https://nibsuat-be.elken.com/api * Development [DEV] -> https://nibsdev-be.elken.com/api ``` VUE_APP_BACKEND_URL=https://nibsdev-be.elken.com/api VUE_APP_WEB_URL=https://localhost ``` ### API Mocking To mock all APIs use the following environment variable ``` VUE_APP_BACKEND_MOCK=true ``` If you want a specific API mocked then you can include it in `/mock-api-url.js` like the following ``` export const API_URL = process.env.VUE_APP_BACKEND_URL export default { [API_URL + '/member/stats']: true } ``` Note: keep in mind that `/mock-api-url.js` is in `.gitignore` and will not be comitted to GIT ### Vendor plugin settings This setting is for Elken Live Chat and Feedback plugin
Change the variable to `true` to enable the plugins * VUE_APP_INIT_FRESH_WIDGET => Feedback Plugin * VUE_APP_INIT_FC_WIDGET => Live Chat Plugin ``` VUE_APP_INIT_FRESH_WIDGET=false VUE_APP_INIT_FC_WIDGET=false ``` ### Logging settings This setting is for Sentry service
Change the variables to `true` to activate the Sentry service ``` VUE_APP_LOG_SENTRY=false VUE_APP_SENTRY_DSN=false VUE_APP_SENTRY_AUTH_TOKEN=false VUE_APP_SENTRY_URL=false VUE_APP_SENTRY_PROJECT=false ``` ### Enrolment tabs checker setting This setting is uses to avoid multiple enrolment session
Change the variable to `false` to disable multiple enrollment session validation ``` VUE_APP_ENROLMENT_TABS_CHECKER=true ``` ### Websocket Change the variable to `false` to disable websocket service
Change application socket URL based on needs: * Staging [UAT] -> https://nibsuat-be.elken.com * Development [DEV] -> https://nibsdev-be.elken.com ``` VUE_APP_WEBSOCKET=true VUE_APP_ECHO_URL=https://nibsdev-be.elken.com ``` ### Google analytics setting This setting is uses to trigger google analytics service in e-shop
1. Change the variable to `false` to disable Google analytics service 1. Replace `VUE_APP_GA_MEASUREMENT_ID` with the ID of the Google Analytics property to which you want to send data. ``` VUE_APP_GOOGLE_ANALYTICS=true VUE_APP_GA_MEASUREMENT_ID=XXXXXXXXXXXXXXX ``` ### Testing - Jest Jest sometimes creates a latency on test promise resolving, the following env will allow to change the latency, if not provided the timeout is set to 10000 ``` VUE_APP_JEST_PROMISE_TIMEOUT=10000 ``` ### CV wallet feature setting This setting is uses to enable CV wallet feature in E-Shop
Change the variables to `true` to activate CV wallet feature ``` VUE_APP_CV_WALLET=false ``` ___ ## Git Flow Git status: |Status |Branch Name|Server Name| |-------|:---------:|:---------:| |STAGING| master | UAT | |LIVE | - | LIVE | |DEV | V2-dev | DEV | ### Scenario 1: Feature/Bug fixed 1. Pull code from `STAGING` 1. After coding, push code to `DEV` for testing 1. Push code to `STAGING` ### Scenario 2: HotFix 1. Pull code from `LIVE` 1. Optional: If changes is big/complicated, push to `DEV` for testing 1. Push code to `LIVE` ### Commit Message Guidelines We have very precise rules over how our git commit messages can be formatted. This leads to `more readable messages` that are easy to follow when looking through the `project history`. But also, we use the git commit messages to `generate the change log`. ##### Commit Message Format Each commit message consists of a `header`. The `header` has a special format that includes a `type`, a `scope` and a `subject`: ``` (?optional): ``` The header is mandatory and the scope of the header is optional. Any line of the commit message cannot be longer 100 characters! This allows the message to be easier to read on GitHub as well as in various git tools. ###### Samples: ``` feat: GST-1234: Added new xyz feature ``` ##### Revert If the commit reverts a previous commit, it should begin with `revert:`, followed by the header of the reverted commit. In the body it should say: `This reverts commit `., where the hash is the SHA of the commit being reverted. ##### Type Must be one of the following: 1. `feat`: A new feature 1. `fix`: A bug fix 1. `refactor`: A code change that neither fixes a bug nor adds a feature 1. `chore`: Other changes that don't modify src or test files 1. `build`: Changes that affect the build system or external dependencies (example scopes: poison, phoenix) 1. `docs`: Documentation only changes 1. `perf`: A code change that improves performance 1. `style`: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) 1. `test`: Adding missing tests or correcting existing tests 1. `ci`: Changes to our CI configuration files and scripts (example scopes: Travis, Coveralls) 1. `revert`: Reverts a previous commit ##### ~~Scope (Not in use for now)~~ ~~The scope should be the name of the section affected (as perceived by person reading changelog generated from commit messages).~~ ##### Subject 1. The subject contains succinct description of the change: 1. use the imperative, present tense: “change” not “changed” nor “changes” don’t capitalize first letter 1. no dot (.) at the end ___ ## Automation Test Bind `data-qa` property to every necessary UI component to ease automation testing.
Name attributes name as per naming conventions(kebab-case) below:
##### Normal Component ``` [moduleName]-[screenName]-[UiComponentName]-[UiComponentType] eg: login-login-form-login-btn ``` Example: `Login` ##### Global Component ``` [UiComponentName]-[UiComponentType] eg: product-quantity-field ``` Example: ``
***Try to make it as unique as possible for easy identification --- # IBS Member frontend v1 to v2 #### Move from to Vue-cli 3 * Requires vue-cli and vue-cli-service to be installed #### Move from Webpack 3 to Webpack 4 * Webpack config now handled by package.json and vue.config.js #### Move from Yarn to NPM 6.7.0 * removed yarn.lock and using package-lock.json #### Move from babel 6 to 7.2 (presets to minimal stage) * Remove babel staging presets (result of upgrading to bable 7.2 ref: "As of v7.0.0-beta.55, we've removed Babel's Stage presets" https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets) * Remove babel @babel/polyfill (result of upgrading to bable 7.2) * Supporting ES6 and ES7 (ref: https://davidwalsh.name/es7-es8-features) #### Stable major packages * Stable at Bootstarp 4 * Stable at Vue 2 * Stable at supporting 1% market devices with override condition (ios >= 6, safari >= 8, not ie <= 8) * Stable at node v10.* * Stable at npm 6.* * Stable at bootstrap-vue 2.* #### Changes in environment * Environment variables changed to adopt Vue Cli Env naming convention * Using vue-cli-server for package.json scripts * Certificate files changed, if you don't want to add to browser exceptions. Add download the .pyb version of the certificate * To add the certificate to root certificate for windows. * `Win` Search for `Manage Computer Certificate` * Right click on `Trusted Root Certificate Authorities` -> `Install` * Install the certificate in `certs\server.crt` * Open CMD as administrator * Type `certutil -setreg chain\ChainCacheResyncFiletime @now` * Go to chrome type `chrome://restart` in url #### Changes in packages: * @xkeshi/vue-qrcode depreciated, new library fengyuanchen/vue-qrcode * D3 3.* to D3 4.* #### Main changes in code * Spreading over function calls not allowed * Component Property variables stict naming * ESLint configuration changed #### Known issues * D3 components not working * Size selection components not working #### Upgrading development environment or setup * Upgrading from previous version. Delete node_modules and package-json.lock. * Change .env parameters to use new parameters (see .env.example) * Install vue-cli `npm install -g @vue/cli` * Check version `vue --version` * Remove `node_moduels` directory, delete `package-json.lock` or `yarn.lock` * Run `npm install` * Run `npm serve` #### Help wanted * Rename all component props to follow static naming * Test all components functionality and fix breaks * Make d3 components functional * Fix style breaking ____ #### Road-map to version 3 * Add static type checker (flow or typescript) * Change all components to adopt full restiveness * Decouple components and isolate template based components with logical (modeling) components * Improve code readability and centralize reusable code in repository * Move API or component integration to a centralized location (store or actions) * Make application state oriented rather then on-demand requests * Introduce an data loader to fetch API data based on state changes