#56 Create Onboarding UI flow

MemriApp/Assets/defaultCVU/named/onboarding.cvu

+.onboarding {
+    defaultRenderer: custom
+    showSearchBar: false
+    showContextualBottomBar: false
+    showBottomBar: false
+    showTopBar: false
+
+    VStack {
+        alignment: center
+        background: #F6F5F5
+        spacing: 5
+        padding: 0 0 10 0
+
+        Text {
+            text: "STEP 1"
+            font: 13 regular
+            textAlign: center
+            color: primary
+            padding: 50 20 0 10
+        }
+
+        Text {
+            text: "Where do you store your contacts?"
+            font: 30 light
+            textAlign: center
+            color: primary
+            padding: 20 20 0 20
+        }
+
+        Text {
+            text: "Choose the services you use most often to connect your data to the Wallet."
+            font: 16 semibold
+            textAlign: left
+            color: primary
+            padding: 20 20 0 20
+        }
+
+        Text {
+            text: "By importing your data to your wallet you take a first step to protect your privacy."
+            font: 16 semibold
+            textAlign: left
+            color: primary
+            padding: 10 20 0 20
+        }
+
+        SubView {
+            id: pluginGrid
+            height: 200
+            padding: 10 10 10 10
+
+            view {
+                viewName: Plugin
+                defaultRenderer: grid
+                background: #F6F5F5
+                editMode: true
+
+                [datasource = pod] {
+                    query: "Plugin"
+                    sortProperty: dateModified
+                    sortAscending: false
+                }
+
+                arguments: {
+                    showToolbar: false
+                    showBottomBar: false
+                    readOnly: true
+                }
+            }
+        }
+
+        Button {
+            background: #000
+            cornerRadius: 100
+            width: 50
+            height: 50
+
+            Image {
+                alignment: center
+                systemName: "arrow.right"
+                resizable: true
+                sizingMode: fit
+                color: #fff
+                font: 24
+                padding: 10 10 10 10
+            }
+
+            onPress: openView {
+                viewName: "onboarding-login"
+                items: {{importerGrid.selected}}
+            }
+        }
+    }
+}
+
+.onboarding-login {
+    defaultRenderer: custom
+    showSearchBar: false
+    showContextualBottomBar: false
+    showBottomBar: false
+    showTopBar: false
+
+    VStack {
+        alignment: top
+        background: #F6F5F5
+        spacing: 10
+
+        Text {
+            text: "STEP 2"
+            font: 13 regular
+            textAlign: center
+            color: primary
+            padding: 50 20 0 10
+        }
+
+        Text {
+            alignment: left
+            text: "Connect Whatsapp"
+            font: 30 light
+            textAlign: left
+            color: primary
+            padding: 20 20 0 10
+        }
+
+        VStack {
+            alignment: left
+            padding: 10
+
+            Text {
+                text: "Please provide your login and password to connect your Whatsapp account."
+                font: 16
+                textAlign: left
+                color: primary
+            }
+
+            Text {
+                padding: 20 0 0 0
+                text: "Whatsapp login"
+                font: 12 semibold
+                textAlign: left
+                color: primary
+            }
+
+            Textfield {
+                rows: 1
+                minHeight: 50
+                border: #DDD 1
+                background: #ffFFFF
+            }
+
+            Text {
+                padding: 20 0 0 0
+                text: "Password"
+                font: 12 semibold
+                textAlign: left
+                color: primary
+            }
+
+            Textfield {
+                secure: true
+                rows: 1
+                minHeight: 50
+                background: #ffFFFF
+                border: #DDD 1
+            }
+        }
+
+        Button {
+            background: #000
+            cornerRadius: 30
+            width: 200
+            height: 50
+
+            HStack {
+                Text {
+                    text: "Login To Whatsapp"
+                    color: #fff
+                }
+
+                Image {
+                    alignment: center
+                    systemName: "arrow.right"
+                    resizable: true
+                    sizingMode: fit
+                    color: #fff
+                    font: 20
+                    padding: 18 0 18 0
+                }
+            }
+
+            onPress: openpopup {
+                title: "We couldn’t log you in."
+                text: "Your username or password are incorrect."
+                actions: [
+                    openView {"title": "Try again", viewName: "onboarding-two-factor"}
+                    ]
+            }
+        }
+
+        HStack {
+            Button {
+                cornerRadius: 30
+                padding: 25 10
+
+                onPress: openView {
+                    viewName: "onboarding-access"
+                }
+
+                HStack {
+                    Text {
+                        text: "Let's skip this, I'm not sure."
+                        font: 16
+                        color: #000
+                    }
+                }
+            }
+        }
+
+    }
+}
+
+.onboarding-two-factor {
+    defaultRenderer: custom
+    showSearchBar: false
+    showContextualBottomBar: false
+    showBottomBar: false
+    showTopBar: false
+
+    VStack {
+        alignment: top
+        background: #F6F5F5
+        spacing: 10
+
+        Text {
+            text: "STEP 3: Whatsapp"
+            font: 13 regular
+            textAlign: center
+            color: primary
+            padding: 50 20 0 10
+        }
+
+        Text {
+            alignment: left
+            text: "Confirm it's you"
+            font: 30 light
+            textAlign: left
+            color: primary
+            padding: 20 20 0 10
+        }
+
+        VStack {
+            alignment: left
+            padding: 10
+
+            Text {
+                text: "Two factor authentication is required. Please provide one time password sent to you via SMS."
+                font: 16
+                textAlign: left
+                color: primary
+            }
+
+            Text {
+                padding: 20 0 0 0
+                text: "Authentication code"
+                font: 12 semibold
+                textAlign: left
+                color: primary
+            }
+
+            Textfield {
+                rows: 1
+                minHeight: 50
+                border: #DDD 1
+                background: #ffFFFF
+            }
+
+        }
+
+        Button {
+            background: #000
+            cornerRadius: 30
+            width: 210
+            height: 50
+
+            HStack {
+                Text {
+                    text: "Authenticate Whatsapp"
+                    color: #fff
+                }
+
+                Image {
+                    alignment: center
+                    systemName: "arrow.right"
+                    resizable: true
+                    sizingMode: fit
+                    color: #fff
+                    font: 20
+                    padding: 18 0 18 0
+                }
+            }
+
+            onPress: openpopup {
+                title: "Authenticaion failed."
+                text: "Your phone failed to authenticate. Try signing in again later.."
+                actions: [
+                    openView {"title": "Try again", viewName: "onboarding-access"}
+                    ]
+            }
+        }
+
+        HStack {
+            Button {
+                cornerRadius: 30
+                padding: 25 10
+
+                onPress: openView {
+                    viewName: "onboarding-access"
+                }
+
+                HStack {
+                    Text {
+                        text: "Let's skip this, I'll do it later"
+                        font: 16
+                        color: #000
+                    }
+                }
+            }
+        }
+
+    }
+}
+
+.onboarding-access {
+    defaultRenderer: custom
+    showSearchBar: false
+    showContextualBottomBar: false
+    showBottomBar: false
+    showTopBar: false
+
+    VStack {
+        alignment: top
+        background: #F6F5F5
+        spacing: 10
+
+        Text {
+            text: "STEP 4"
+            font: 13 regular
+            textAlign: center
+            color: primary
+            padding: 50 20 0 10
+        }
+
+        Text {
+            alignment: left
+            text: "Allow access."
+            font: 30 light
+            textAlign: left
+            color: primary
+            padding: 20 20 0 10
+        }
+
+        VStack {
+            alignment: left
+            padding: 10
+
+            Text {
+                text: "We need your permission to access your data."
+                font: 16
+                textAlign: left
+                color: primary
+            }
+
+            Text {
+                padding: 20 0 0 0
+                text: "CONTACT BOOK"
+                font: 14 semibold
+                textAlign: left
+                color: #17A4E0
+            }
+
+            Text {
+                padding: 5 0 0 0
+                text: "Because memri is all about people."
+                font: 16
+                textAlign: left
+                color: primary
+            }
+
+            Text {
+                padding: 20 0 0 0
+                text: "LOCATION"
+                font: 14 semibold
+                textAlign: left
+                color: #17A4E0
+            }
+
+            Text {
+                padding: 5 0 0 0
+                text: "So that you have the fastest (and nearest!) server to where you are."
+                font: 16
+                textAlign: left
+                color: primary
+            }
+
+            Text {
+                padding: 5 0 0 0
+                text: "Learn more about our infrastructure."
+                font: 16
+                textAlign: left
+                color: primary
+            }
+
+            Text {
+                padding: 20 0 0 0
+                text: "STORAGE AND MEDIA"
+                font: 14 semibold
+                textAlign: left
+                color: #17A4E0
+            }
+
+            Text {
+                padding: 5 0 0 0
+                text: "Your content is always yours. We don’t ever peek through. Yet you need to share it with your pod."
+                font: 16
+                textAlign: left
+                color: primary
+            }
+
+        }
+
+        Button {
+            background: #000
+            cornerRadius: 30
+            width: 210
+            height: 50
+
+            HStack {
+                Text {
+                    text: "Allow access"
+                    color: #fff
+                }
+
+                Image {
+                    alignment: center
+                    systemName: "arrow.right"
+                    resizable: true
+                    sizingMode: fit
+                    color: #fff
+                    font: 20
+                    padding: 18 0 18 0
+                }
+            }
+
+            onPress: [
+                requestcontacts,
+                requestlocation,
+                requeststorage,
+                openView {
+                    viewName: "onboarding-finish"
+                }]
+        }
+
+        HStack {
+            Button {
+                cornerRadius: 30
+                padding: 25 10
+
+                onPress: openView {
+                    viewName: "onboarding-finish"
+                }
+
+                HStack {
+                    Text {
+                        text: "Let's skip this, I'll do it later"
+                        font: 16
+                        color: #000
+                    }
+                }
+            }
+        }
+
+    }
+}
+
+.onboarding-finish {
+    defaultRenderer: custom
+    showSearchBar: false
+    showContextualBottomBar: false
+    showBottomBar: false
+    showTopBar: false
+
+    VStack {
+        alignment: top
+        background: #F6F5F5
+        spacing: 10
+
+        Text {
+            alignment: left
+            text: "Yay! Good to see you here!"
+            font: 30 light
+            textAlign: left
+            color: primary
+            padding: 20
+        }
+
+        VStack {
+            alignment: left
+            padding: 10
+
+            Text {
+                text: "Enjoy the full wallet experience for free for 7 days. No strings attached."
+                font: 16
+                textAlign: left
+                color: primary
+            }
+
+            Text {
+                padding: 20 0 0 0
+                text: "● free trial"
+                font: 16
+                textAlign: left
+                color: primary
+            }
+
+            Text {
+                text: "● no credit card required"
+                font: 16
+                textAlign: left
+                color: primary
+            }
+
+            Text {
+                text: "● your free trial ends automatically after 7 days."
+                font: 16
+                textAlign: left
+                color: primary
+            }
+
+
+        }
+
+        HStack {
+            padding: 20 0
+            alignment: center
+            Text {
+                font: 16
+                text: "I consent to sharing my usage data for the purpose of enhancing user experience."
+            }
+
+            Toggle {
+                value: {{.allowSharing}}
+            }
+        }
+
+        Text {
+            padding: 0 20 20 20
+            color: #828282
+            font: 13
+            text: "When this setting is on, you consent for memri to report information on app usage (anonymous), for example, which of the features are most frequently used. Learn more."
+        }
+
+
+        Button {
+            background: #000
+            cornerRadius: 30
+            width: 210
+            height: 50
+
+            HStack {
+                Text {
+                    text: "You're all set!"
+                    color: #fff
+                }
+
+                Image {
+                    alignment: center
+                    systemName: "arrow.right"
+                    resizable: true
+                    sizingMode: fit
+                    color: #fff
+                    font: 20
+                    padding: 18 0 18 0
+                }
+            }
+
+            onPress: openView {
+                viewName: "allPeople"
+            }
+        }
+
+    }
+}

MemriApp/Assets/demo_database.json

 [
+   {
+       "_type": "NavigationItem",
+       "title": "Onboarding",
+       "sessionName": "onboarding"
+   },
    {
       "_type":"Indexer",
       "name":"Geolocation indexer",

MemriApp/CVU/actions/CVUAction.swift

@@ -14,7 +14,7 @@ protocol CVUAction {
     var id: String { get }
     var defaultVars: [String: CVUValue] { get }
     var vars: [String: CVUValue] { get }
-    func execute(sceneController: SceneController, context: CVUContext)
+    func execute(sceneController: SceneController, context: CVUContext, completion: ((Any?) -> ())?)
     func getString(_ key: String, _ context: CVUContext, _ viewContext: ViewContextController?) -> String?
 }
 
@@ -35,8 +35,9 @@ extension CVUAction {
         return value
     }
     
-    func execute(sceneController: SceneController, context: CVUContext) {
+    func execute(sceneController: SceneController, context: CVUContext, completion: ((Any?) -> ())?) {
         // Default implementation does nothing
+        completion?(nil)
     }
 }
 
@@ -91,6 +92,18 @@ func cvuAction(named: String) -> CVUAction.Type? {
         return CVUAction_Unlink.self
     case "multiaction":
         return CVUAction_MultiAction.self
+    case "requestcontacts":
+        return CVUAction_RequestContactsPermission.self
+    case "requestlocation":
+        return CVUAction_RequestLocationPermission.self
+    case "requestcamera":
+        return CVUAction_RequestCameraPermission.self
+    case "requestphotolibrary":
+        return CVUAction_RequestPhotoLibraryPermission.self