# KYC Connect Tutorial

## Description
- Tutorial show the instruction how to use dashboard step by step
- Tuturial has:
- Step1: show link google play store + app store for user to download Blockpass app
- https://play.google.com/store/apps/details?id=com.blockpass_mobile
- https://apps.apple.com/us/app/blockpass/id1322917010
- Step 2: show the qr code for the app that can register new record on mobile. ***
- using sdk: receive status complete from sdk when operator scan qr code to go to next step
- using cli:
- 3rd-sso [options] <clientId> <sessionCode> [refId]
**Note: should show text that warn user scan the qr code to and take action to go to next step

- Step 3: Once KYCList query new profile with refId of this qr code, tutorial will show the next step
**Note: should show text that warn user add data in mobile app and take action to go to next step
- at the final step ->
- back to home page when clicking Start review Btn
- or show admin console at new tab when clicking to the admin console link

## Rule
- Tutorial show:
- When user first time login to service
- When user click on "Show tutorial" on dashboard
- Always tutorial at the beginning step

- Tutorial close:
- take action that user has known tutorial
- backend: update data user has got tutorial already
- frontend: update store that use to check user got tutorial

- Only show the next step content when tutorial step conditions complete. Cannot click to step btn to skip the step content

## Design

- Tutorial show on modal
- Tutorial is shown automatically on KYCList when user first time login to service
- https://projects.invisionapp.com/d/main?origin=v7#/console/18513814/386618657/preview

## Development

### Backend

- Add new module **tutorial**

- model:
    - userId
    - clientId
    - hasCompleted
            - <tutorialType> (tutorial for firsttime login = 'firstTimeTutorial'): **Boolean** 
        
- controller:
    - get tutorial info
    - update tutorial status

### Frontend
#### Store
- Domain Store TutorialStore:
- objData: status tutorial of client
- action get/update status tutorial data to server
- get data on event(ON_ACTIVE_SERVICE_CHANGE)

- ViewStore: 'TutorialViewStore':
- handle state(currentStep) and action in modal

#### Layout

- Tutorial Modal:
- only show tutorial modal on kyc list page
- if operator not on kyc list page, redirect to kyc list page and show modal
- auto show modal when tutorial clientId status in TutorialStore === true
- tutorial template
- main content
- Welcome
- Tutorial
- RightBanner (with closeBtn at the top)
- Step component
- Step1, Step2, ... components