ibs-member-frontend

IBS Member frontend v2

Installation

Prerequisites

• Node.js - version 8.9 or above (8.11.0+ recommended)
• Git - you can download from here
• 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'
2. Enter the following command: git checkout master
3. Copy .env.example file and paste the file as .env. and update the enviroment variables
4. Delete package-json.lock file or yarn.lock file
5. Open a terminal/console window for the folder and run npm install
6. 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

2. 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
2. After coding, push code to DEV for testing

3. Push code to STAGING

   Scenario 2: HotFix

4. Pull code from LIVE

5. Optional: If changes is big/complicated, push to DEV for testing

6. 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:

<type>(<scope>?optional): <subject>

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 <hash>., where the hash is the SHA of the commit being reverted.

Type

Must be one of the following:

1. feat: A new feature
2. fix: A bug fix
3. refactor: A code change that neither fixes a bug nor adds a feature
4. chore: Other changes that don't modify src or test files
5. build: Changes that affect the build system or external dependencies (example scopes: poison, phoenix)
6. docs: Documentation only changes
7. perf: A code change that improves performance
8. style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
9. test: Adding missing tests or correcting existing tests
10. ci: Changes to our CI configuration files and scripts (example scopes: Travis, Coveralls)
11. 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:
2. use the imperative, present tense: “change” not “changed” nor “changes” don’t capitalize first letter
3. 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: <b-button @click="submit"data-qa="login-loginForm-login-btn">Login</button>

Global Component

[UiComponentName]-[UiComponentType]
eg: product-quantity-field

Example: <b-input v-model="quantity"data-qa="productQuantity-field"/>
***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