First time Purchases tutorial

interface/resources/qml/hifi/commerce/purchases/FirstUseTutorial.qml

@@ -13,6 +13,7 @@
 
 import Hifi 1.0 as Hifi
 import QtQuick 2.5
+import QtGraphicalEffects 1.0
 import QtQuick.Controls 1.4
 import "../../../styles-uit"
 import "../../../controls-uit" as HifiControlsUit
@@ -24,40 +25,103 @@ Rectangle {
     HifiConstants { id: hifi; }
 
     id: root;
-    property string activeView: "step_1";
+    property int activeView: 1;    
-    // Style
+
-    color: hifi.colors.baseGray;
+    Image {
+        anchors.fill: parent;
+        source: "images/Purchase-First-Run-" + root.activeView + ".jpg";
+    }
+
+    // This object is always used in a popup.
+    // This MouseArea is used to prevent a user from being
+    //     able to click on a button/mouseArea underneath the popup.
+    MouseArea {
+        anchors.fill: parent;
+        propagateComposedEvents: false;
+    }
+
+    Item {
+        id: header;
+        anchors.top: parent.top;
+        anchors.left: parent.left;
+        anchors.right: parent.right;
+        height: childrenRect.height;
+
+        Image {
+            id: marketplaceHeaderImage;
+            source: "../common/images/marketplaceHeaderImage.png";
+            anchors.top: parent.top;
+            anchors.topMargin: 2;
+            anchors.left: parent.left;
+            anchors.leftMargin: 8;
+            width: 140;
+            height: 58;
+            fillMode: Image.PreserveAspectFit;
+            visible: false;
+        }
+        ColorOverlay {
+            anchors.fill: marketplaceHeaderImage;
+            source: marketplaceHeaderImage;
+            color: "#FFFFFF"
+        }
+        RalewayRegular {
+            id: introText1;
+            text: "<font size='2'>INTRODUCTION TO</font><br>My Purchases";
+            // Text size
+            size: 28;
+            // Anchors
+            anchors.top: marketplaceHeaderImage.bottom;
+            anchors.topMargin: -8;
+            anchors.left: parent.left;
+            anchors.leftMargin: 12;
+            anchors.right: parent.right;
+            height: paintedHeight;
+            // Style
+            color: hifi.colors.white;
+        }
+    }
 
     //
     // "STEP 1" START
     //
     Item {
         id: step_1;
-        visible: root.activeView === "step_1";
+        visible: root.activeView === 1;
-        anchors.top: parent.top;
+        anchors.top: header.bottom;
+        anchors.topMargin: 100;
         anchors.left: parent.left;
+        anchors.leftMargin: 30;
         anchors.right: parent.right;
-        anchors.bottom: tutorialActionButtonsContainer.top;
+        anchors.bottom: parent.bottom;
 
         RalewayRegular {
             id: step1text;
-            text: "<b>This is the first-time Purchases tutorial.</b><br><br>Here is some <b>bold text</b> " +
+            text: "The <b>'REZ IT'</b> button makes your purchase appear in front of you.";
-            "inside Step 1.";
             // Text size
-            size: 24;
+            size: 20;
             // Anchors
             anchors.top: parent.top;
-            anchors.bottom: parent.bottom;
             anchors.left: parent.left;
-            anchors.leftMargin: 16;
+            width: 180;
-            anchors.right: parent.right;
+            height: paintedHeight;
-            anchors.rightMargin: 16;
             // Style
-            color: hifi.colors.faintGray;
+            color: hifi.colors.white;
             wrapMode: Text.WordWrap;
-            // Alignment
+        }
-            horizontalAlignment: Text.AlignHCenter;
+        
-            verticalAlignment: Text.AlignVCenter;
+        // "Next" button
+        HifiControlsUit.Button {
+            color: hifi.buttons.blue;
+            colorScheme: hifi.colorSchemes.dark;
+            anchors.top: step1text.bottom;
+            anchors.topMargin: 16;
+            anchors.left: parent.left;
+            width: 150;
+            height: 40;
+            text: "Next";
+            onClicked: {
+                root.activeView++;
+            }
         }
     }
     //
@@ -69,127 +133,52 @@ Rectangle {
     //
     Item {
         id: step_2;
-        visible: root.activeView === "step_2";
+        visible: root.activeView === 2;
-        anchors.top: parent.top;
+        anchors.top: header.bottom;
+        anchors.topMargin: 45;
         anchors.left: parent.left;
+        anchors.leftMargin: 30;
         anchors.right: parent.right;
-        anchors.bottom: tutorialActionButtonsContainer.top;
+        anchors.bottom: parent.bottom;
 
         RalewayRegular {
             id: step2text;
-            text: "<b>STEP TWOOO!!!</b>";
+            text: "If you rez an item twice, the first one will disappear.";
             // Text size
-            size: 24;
+            size: 20;
             // Anchors
             anchors.top: parent.top;
-            anchors.bottom: parent.bottom;
             anchors.left: parent.left;
-            anchors.leftMargin: 16;
+            width: 180;
-            anchors.right: parent.right;
+            height: paintedHeight;
-            anchors.rightMargin: 16;
             // Style
-            color: hifi.colors.faintGray;
+            color: hifi.colors.white;
             wrapMode: Text.WordWrap;
-            // Alignment
+        }
-            horizontalAlignment: Text.AlignHCenter;
+        
-            verticalAlignment: Text.AlignVCenter;
+        // "GOT IT" button
+        HifiControlsUit.Button {
+            color: hifi.buttons.blue;
+            colorScheme: hifi.colorSchemes.dark;
+            anchors.top: step2text.bottom;
+            anchors.topMargin: 16;
+            anchors.left: parent.left;
+            width: 150;
+            height: 40;
+            text: "GOT IT";
+            onClicked: {
+                sendSignalToParent({method: 'tutorial_finished'});
+            }
         }
     }
     //
     // "STEP 2" END
     //
 
-    Item {
-        id: tutorialActionButtonsContainer;
-        // Size
-        width: root.width;
-        height: 70;
-        // Anchors
-        anchors.left: parent.left;
-        anchors.bottom: parent.bottom;
-        anchors.bottomMargin: 24;
-
-        // "Skip" or "Back" button
-        HifiControlsUit.Button {
-            id: skipOrBackButton;
-            color: hifi.buttons.black;
-            colorScheme: hifi.colorSchemes.dark;
-            anchors.top: parent.top;
-            anchors.topMargin: 3;
-            anchors.bottom: parent.bottom;
-            anchors.bottomMargin: 3;
-            anchors.left: parent.left;
-            anchors.leftMargin: 20;
-            width: parent.width/2 - anchors.leftMargin*2;
-            text: root.activeView === "step_1" ? "Skip" : "Back";
-            onClicked: {
-                if (root.activeView === "step_1") {
-                    sendSignalToParent({method: 'tutorial_skipClicked'});
-                } else {
-                    root.activeView = "step_" + (parseInt(root.activeView.split("_")[1]) - 1);
-                }
-            }
-        }
-
-        // "Next" or "Finish" button
-        HifiControlsUit.Button {
-            id: nextButton;
-            color: hifi.buttons.blue;
-            colorScheme: hifi.colorSchemes.dark;
-            anchors.top: parent.top;
-            anchors.topMargin: 3;
-            anchors.bottom: parent.bottom;
-            anchors.bottomMargin: 3;
-            anchors.right: parent.right;
-            anchors.rightMargin: 20;
-            width: parent.width/2 - anchors.rightMargin*2;
-            text: root.activeView === "step_2" ? "Finish" : "Next";
-            onClicked: {
-                // If this is the final step...
-                if (root.activeView === "step_2") {
-                    sendSignalToParent({method: 'tutorial_finished'});
-                } else {
-                    root.activeView = "step_" + (parseInt(root.activeView.split("_")[1]) + 1);
-                }
-            }
-        }
-    }
-
     //
     // FUNCTION DEFINITIONS START
     //
-    //
-    // Function Name: fromScript()
-    //
-    // Relevant Variables:
-    // None
-    //
-    // Arguments:
-    // message: The message sent from the JavaScript, in this case the Marketplaces JavaScript.
-    //     Messages are in format "{method, params}", like json-rpc.
-    //
-    // Description:
-    // Called when a message is received from a script.
-    //
-    function fromScript(message) {
-        switch (message.method) {
-            case 'updatePurchases':
-                referrerURL = message.referrerURL;
-            break;
-            case 'purchases_getIsFirstUseResult':
-                if (message.isFirstUseOfPurchases && root.activeView !== "firstUseTutorial") {
-                    root.activeView = "firstUseTutorial";
-                } else if (!message.isFirstUseOfPurchases && root.activeView === "initialize") {
-                    root.activeView = "purchasesMain";
-                    commerce.inventory();
-                }
-            break;
-            default:
-                console.log('Unrecognized message from marketplaces.js:', JSON.stringify(message));
-        }
-    }
     signal sendSignalToParent(var message);
-
     //
     // FUNCTION DEFINITIONS END
     //

interface/resources/qml/hifi/commerce/purchases/Purchases.qml

@@ -35,6 +35,7 @@ Rectangle {
     property bool canRezCertifiedItems: Entities.canRezCertified || Entities.canRezTmpCertified;
     property bool pendingInventoryReply: true;
     property bool isShowingMyItems: false;
+    property bool isDebuggingFirstUseTutorial: false;
     // Style
     color: hifi.colors.white;
     Hifi.QmlCommerce {
@@ -250,12 +251,9 @@ Rectangle {
 
     FirstUseTutorial {
         id: firstUseTutorial;
+        z: 999;
         visible: root.activeView === "firstUseTutorial";
-        anchors.top: titleBarContainer.bottom;
+        anchors.fill: parent;
-        anchors.topMargin: -titleBarContainer.additionalDropdownHeight;
-        anchors.bottom: parent.bottom;
-        anchors.left: parent.left;
-        anchors.right: parent.right;
 
         Connections {
             onSendSignalToParent: {
@@ -682,7 +680,7 @@ Rectangle {
                 filterBar.text = message.filterText ? message.filterText : "";
             break;
             case 'purchases_getIsFirstUseResult':
-                if (message.isFirstUseOfPurchases && root.activeView !== "firstUseTutorial") {
+                if ((message.isFirstUseOfPurchases || root.isDebuggingFirstUseTutorial) && root.activeView !== "firstUseTutorial") {
                     root.activeView = "firstUseTutorial";
                 } else if (!message.isFirstUseOfPurchases && root.activeView === "initialize") {
                     root.activeView = "purchasesMain";

scripts/system/commerce/wallet.js

@@ -78,6 +78,7 @@
                 onButtonClicked();
                 break;
             case 'walletReset':
+                Settings.setValue("isFirstUseOfPurchases", true);
                 onButtonClicked();
                 onButtonClicked();
                 break;