---
# System prepended metadata

title: KYC Connect Tutorial

---

# 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