Merge branch 'master' of https://github.com/highfidelity/hifi into asynchronous-commerce

interface/resources/qml/hifi/commerce/Checkout.qml

@@ -26,11 +26,27 @@ Rectangle {
     id: checkoutRoot;
     property string itemId; 
     property string itemHref;
+    property int balanceAfterPurchase: commerce.balance() - parseInt(itemPriceText.text, 10);
+    property bool alreadyOwned: checkAlreadyOwned(itemId);
     // Style
     color: hifi.colors.baseGray;
     Hifi.QmlCommerce {
         id: commerce;
         onBuyResult: {
+        /*
+                if (buyFailed) {
+                    sendToScript({method: 'checkout_cancelClicked', params: itemId});
+                } else {
+                    var success = commerce.buy(itemId, parseInt(itemPriceText.text));
+                    sendToScript({method: 'checkout_buyClicked', success: success, itemId: itemId, itemHref: itemHref});
+                    if (success) {
+                        if (urlHandler.canHandleUrl(itemHref)) {
+                            urlHandler.handleUrl(itemHref);
+                        }
+                    }
+                }
+    */
+
                 if (failureMessage.length) {
                     console.log('buy failed', failureMessage);
                     //fixme sendToScript({method: 'checkout_cancelClicked', params: itemId});
@@ -184,11 +200,56 @@ Rectangle {
             }
         }
         
+        // HFC Balance text
+        Item {
+            id: hfcBalanceContainer; 
+            // Anchors
+            anchors.top: itemAuthorContainer.bottom;
+            anchors.topMargin: 16;
+            anchors.left: parent.left;
+            anchors.leftMargin: 16;
+            anchors.right: parent.right;
+            anchors.rightMargin: 16;
+            height: childrenRect.height;
+
+            RalewaySemiBold {
+                id: hfcBalanceTextLabel;
+                text: "HFC Balance:";
+                // Anchors
+                anchors.top: parent.top;
+                anchors.left: parent.left;
+                width: paintedWidth;
+                // Text size
+                size: 20;
+                // Style
+                color: hifi.colors.lightGrayText;
+                // Alignment
+                horizontalAlignment: Text.AlignHLeft;
+                verticalAlignment: Text.AlignVCenter;
+            }
+            RalewayRegular {
+                id: hfcBalanceText;
+                text: commerce.balance();
+                // Text size
+                size: hfcBalanceTextLabel.size;
+                // Anchors
+                anchors.top: parent.top;
+                anchors.left: hfcBalanceTextLabel.right;
+                anchors.leftMargin: 16;
+                width: paintedWidth;
+                // Style
+                color: hifi.colors.lightGrayText;
+                // Alignment
+                horizontalAlignment: Text.AlignHLeft;
+                verticalAlignment: Text.AlignVCenter;
+            }
+        }
+        
         // Item Price text
         Item {
             id: itemPriceContainer; 
             // Anchors
-            anchors.top: itemAuthorContainer.bottom;
+            anchors.top: hfcBalanceContainer.bottom;
             anchors.topMargin: 4;
             anchors.left: parent.left;
             anchors.leftMargin: 16;
@@ -227,6 +288,51 @@ Rectangle {
                 verticalAlignment: Text.AlignVCenter;
             }
         }
+        
+        // HFC "Balance After Purchase" text
+        Item {
+            id: hfcBalanceAfterPurchaseContainer; 
+            // Anchors
+            anchors.top: itemPriceContainer.bottom;
+            anchors.topMargin: 4;
+            anchors.left: parent.left;
+            anchors.leftMargin: 16;
+            anchors.right: parent.right;
+            anchors.rightMargin: 16;
+            height: childrenRect.height;
+
+            RalewaySemiBold {
+                id: hfcBalanceAfterPurchaseTextLabel;
+                text: "HFC Balance After Purchase:";
+                // Anchors
+                anchors.top: parent.top;
+                anchors.left: parent.left;
+                width: paintedWidth;
+                // Text size
+                size: 20;
+                // Style
+                color: hifi.colors.lightGrayText;
+                // Alignment
+                horizontalAlignment: Text.AlignHLeft;
+                verticalAlignment: Text.AlignVCenter;
+            }
+            RalewayRegular {
+                id: hfcBalanceAfterPurchaseText;
+                text: balanceAfterPurchase;
+                // Text size
+                size: hfcBalanceAfterPurchaseTextLabel.size;
+                // Anchors
+                anchors.top: parent.top;
+                anchors.left: hfcBalanceAfterPurchaseTextLabel.right;
+                anchors.leftMargin: 16;
+                width: paintedWidth;
+                // Style
+                color: (balanceAfterPurchase >= 0) ? hifi.colors.lightGrayText : hifi.colors.redHighlight;
+                // Alignment
+                horizontalAlignment: Text.AlignHLeft;
+                verticalAlignment: Text.AlignVCenter;
+            }
+        }
     }
     //
     // ITEM DESCRIPTION END
@@ -243,7 +349,8 @@ Rectangle {
         height: 40;
         // Anchors
         anchors.left: parent.left;
-        anchors.top: itemDescriptionContainer.bottom;
+        anchors.bottom: parent.bottom;
+        anchors.bottomMargin: 8;
 
         // "Cancel" button
         HifiControlsUit.Button {
@@ -267,6 +374,7 @@ Rectangle {
         HifiControlsUit.Button {
             property bool buyFailed: false; // fixme
             id: buyButton;
+            enabled: balanceAfterPurchase >= 0 && !alreadyOwned;
             color: hifi.buttons.black;
             colorScheme: hifi.colorSchemes.dark;
             anchors.top: parent.top;
@@ -276,9 +384,8 @@ Rectangle {
             anchors.right: parent.right;
             anchors.rightMargin: 20;
             width: parent.width/2 - anchors.rightMargin*2;
-            text: "Buy"
+            text: alreadyOwned ? "Already Owned" : "Buy";
             onClicked: {
-                // fixme do spinner thing
                 commerce.buy(itemId, parseInt(itemPriceText.text));
             }
         }
@@ -290,6 +397,16 @@ Rectangle {
     //
     // FUNCTION DEFINITIONS START
     //
+
+    function checkAlreadyOwned(idToCheck) {
+        var inventory = commerce.inventory();
+        if (inventory.indexOf(idToCheck) !== -1) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
     //
     // Function Name: fromScript()
     //
@@ -311,7 +428,6 @@ Rectangle {
                 itemAuthorText.text = message.params.itemAuthor;
                 itemPriceText.text = message.params.itemPrice;
                 itemHref = message.params.itemHref;
-                buyButton.text = "Buy";
                 buyButton.buyFailed = false;
             break;
             case 'buyFailed':

interface/resources/qml/hifi/commerce/Inventory.qml

@@ -0,0 +1,260 @@
+//
+//  Inventory.qml
+//  qml/hifi/commerce
+//
+//  Inventory
+//
+//  Created by Zach Fox on 2017-08-10
+//  Copyright 2017 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import Hifi 1.0 as Hifi
+import QtQuick 2.5
+import QtQuick.Controls 1.4
+import "../../styles-uit"
+import "../../controls-uit" as HifiControlsUit
+import "../../controls" as HifiControls
+
+// references XXX from root context
+
+Rectangle {
+    HifiConstants { id: hifi; }
+
+    id: inventoryRoot;
+    property string referrerURL: "";
+    // Style
+    color: hifi.colors.baseGray;
+    Hifi.QmlCommerce {
+        id: commerce;
+    }
+
+    //
+    // TITLE BAR START
+    //
+    Item {
+        id: titleBarContainer;
+        // Size
+        width: inventoryRoot.width;
+        height: 50;
+        // Anchors
+        anchors.left: parent.left;
+        anchors.top: parent.top;
+
+        // Title Bar text
+        RalewaySemiBold {
+            id: titleBarText;
+            text: "Inventory";
+            // Text size
+            size: hifi.fontSizes.overlayTitle;
+            // Anchors
+            anchors.fill: parent;
+            anchors.leftMargin: 16;
+            // Style
+            color: hifi.colors.lightGrayText;
+            // Alignment
+            horizontalAlignment: Text.AlignHLeft;
+            verticalAlignment: Text.AlignVCenter;
+        }
+
+        // Separator
+        HifiControlsUit.Separator {
+            anchors.left: parent.left;
+            anchors.right: parent.right;
+            anchors.bottom: parent.bottom;
+        }
+    }
+    //
+    // TITLE BAR END
+    //
+
+    //
+    // HFC BALANCE START
+    //
+    Item {
+        id: hfcBalanceContainer; 
+        // Size
+        width: inventoryRoot.width;
+        height: childrenRect.height + 20;
+        // Anchors
+        anchors.left: parent.left;
+        anchors.leftMargin: 16;
+        anchors.top: titleBarContainer.bottom;
+        anchors.topMargin: 4;
+
+        RalewaySemiBold {
+            id: hfcBalanceTextLabel;
+            text: "HFC Balance:";
+            // Anchors
+            anchors.top: parent.top;
+            anchors.left: parent.left;
+            width: paintedWidth;
+            // Text size
+            size: 20;
+            // Style
+            color: hifi.colors.lightGrayText;
+            // Alignment
+            horizontalAlignment: Text.AlignHLeft;
+            verticalAlignment: Text.AlignVCenter;
+        }
+        RalewayRegular {
+            id: hfcBalanceText;
+            text: commerce.balance();
+            // Text size
+            size: hfcBalanceTextLabel.size;
+            // Anchors
+            anchors.top: parent.top;
+            anchors.left: hfcBalanceTextLabel.right;
+            anchors.leftMargin: 16;
+            width: paintedWidth;
+            // Style
+            color: hifi.colors.lightGrayText;
+            // Alignment
+            horizontalAlignment: Text.AlignHLeft;
+            verticalAlignment: Text.AlignVCenter;
+        }
+    }
+    //
+    // HFC BALANCE END
+    //
+    
+    //
+    // INVENTORY CONTENTS START
+    //
+    Item {
+        id: inventoryContentsContainer;
+        // Anchors
+        anchors.left: parent.left;
+        anchors.leftMargin: 16;
+        anchors.right: parent.right;
+        anchors.rightMargin: 16;
+        anchors.top: hfcBalanceContainer.bottom;
+        anchors.topMargin: 8;
+        anchors.bottom: actionButtonsContainer.top;
+        anchors.bottomMargin: 8;
+        
+        RalewaySemiBold {
+            id: inventoryContentsLabel;
+            text: "Inventory:";
+            // Anchors
+            anchors.top: parent.top;
+            anchors.left: parent.left;
+            width: paintedWidth;
+            // Text size
+            size: 24;
+            // Style
+            color: hifi.colors.lightGrayText;
+            // Alignment
+            horizontalAlignment: Text.AlignHLeft;
+            verticalAlignment: Text.AlignVCenter;
+        }
+        ListView {
+            id: inventoryContentsList;
+            // Anchors
+            anchors.top: inventoryContentsLabel.bottom;
+            anchors.topMargin: 8;
+            anchors.left: parent.left;
+            anchors.bottom: parent.bottom;
+            width: parent.width;
+            model: commerce.inventory();
+            delegate: Item {
+                width: parent.width;
+                height: 30;
+                RalewayRegular {
+                    id: thisItemId;
+                    // Text size
+                    size: 20;
+                    // Style
+                    color: hifi.colors.blueAccent;
+                    text: modelData;
+                    // Alignment
+                    horizontalAlignment: Text.AlignHLeft;
+                }
+                MouseArea {
+                    anchors.fill: parent;
+                    hoverEnabled: enabled;
+                    onClicked: {
+                        sendToScript({method: 'inventory_itemClicked', itemId: thisItemId.text});
+                    }
+                    onEntered: {
+                        thisItemId.color = hifi.colors.blueHighlight;
+                    }
+                    onExited: {
+                        thisItemId.color = hifi.colors.blueAccent;
+                    }
+                }
+            }
+        }
+    }
+    //
+    // INVENTORY CONTENTS END
+    //
+    
+    //
+    // ACTION BUTTONS START
+    //
+    Item {
+        id: actionButtonsContainer;
+        // Size
+        width: inventoryRoot.width;
+        height: 40;
+        // Anchors
+        anchors.left: parent.left;
+        anchors.bottom: parent.bottom;
+        anchors.bottomMargin: 8;
+
+        // "Back" button
+        HifiControlsUit.Button {
+            id: backButton;
+            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: "Back"
+            onClicked: {
+                sendToScript({method: 'inventory_backClicked', referrerURL: referrerURL});
+            }
+        }
+    }
+    //
+    // ACTION BUTTONS END
+    //
+
+    //
+    // 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 'updateInventory':
+                referrerURL = message.referrerURL;
+            break;
+            default:
+                console.log('Unrecognized message from marketplaces.js:', JSON.stringify(message));
+        }
+    }
+    signal sendToScript(var message);
+
+    //
+    // FUNCTION DEFINITIONS END
+    //
+}

scripts/system/html/js/marketplacesInject.js

@@ -89,13 +89,32 @@
         });
     }
 
+    function addInventoryButton() {
+        // Why isn't this an id?! This really shouldn't be a class on the website, but it is.
+        var navbarBrandElement = document.getElementsByClassName('navbar-brand')[0];
+        var inventoryElement = document.createElement('a');
+        inventoryElement.classList.add("btn");
+        inventoryElement.classList.add("btn-default");
+        inventoryElement.id = "inventoryButton";
+        inventoryElement.setAttribute('href', "#");
+        inventoryElement.innerHTML = "INVENTORY";
+        inventoryElement.style = "height:100%;margin-top:0;padding:15px 15px;";
+        navbarBrandElement.parentNode.insertAdjacentElement('beforeend', inventoryElement);
+        $('#inventoryButton').on('click', function () {
+            EventBridge.emitWebEvent(JSON.stringify({
+                type: "INVENTORY",
+                referrerURL: window.location.href
+            }));
+        });
+    }
+
     function buyButtonClicked(id, name, author, price, href) {
         EventBridge.emitWebEvent(JSON.stringify({
             type: "CHECKOUT",
             itemId: id,
             itemName: name,
             itemAuthor: author,
-            itemPrice: price,
+            itemPrice: Math.round(Math.random() * 50),
             itemHref: href
         }));
     }
@@ -132,7 +151,8 @@
 
             // Try this here in case it works (it will if the user just pressed the "back" button,
             //     since that doesn't trigger another AJAX request.
-            injectBuyButtonOnMainPage();
+            injectBuyButtonOnMainPage;
+            addInventoryButton();
         }
     }
 
@@ -148,6 +168,7 @@
                     10,
                     href);
             });
+            addInventoryButton();
         }
     }
 

scripts/system/marketplaces/marketplaces.js

@@ -20,6 +20,7 @@
     var MARKETPLACES_URL = Script.resolvePath("../html/marketplaces.html");
     var MARKETPLACES_INJECT_SCRIPT_URL = Script.resolvePath("../html/js/marketplacesInject.js");
     var MARKETPLACE_CHECKOUT_QML_PATH = Script.resourcesPath() + "qml/hifi/commerce/Checkout.qml";
+    var MARKETPLACE_INVENTORY_QML_PATH = Script.resourcesPath() + "qml/hifi/commerce/Inventory.qml";
 
     var HOME_BUTTON_TEXTURE = "http://hifi-content.s3.amazonaws.com/alan/dev/tablet-with-home-button.fbx/tablet-with-home-button.fbm/button-root.png";
     // var HOME_BUTTON_TEXTURE = Script.resourcesPath() + "meshes/tablet-with-home-button.fbx/tablet-with-home-button.fbm/button-root.png";
@@ -86,7 +87,7 @@
 
     function onScreenChanged(type, url) {
         onMarketplaceScreen = type === "Web" && url === MARKETPLACE_URL_INITIAL;
-        wireEventBridge(type === "QML" && url === MARKETPLACE_CHECKOUT_QML_PATH);
+        wireEventBridge(type === "QML" && (url === MARKETPLACE_CHECKOUT_QML_PATH || url === MARKETPLACE_INVENTORY_QML_PATH));
         // for toolbar mode: change button to active when window is first openend, false otherwise.
         marketplaceButton.editProperties({ isActive: onMarketplaceScreen });
         if (type === "Web" && url.indexOf(MARKETPLACE_URL) !== -1) {
@@ -139,6 +140,12 @@
                     action: "inspectionModeSetting",
                     data: Settings.getValue("inspectionMode", false)
                 }));
+            } else if (parsedJsonMessage.type === "INVENTORY") {
+                tablet.pushOntoStack(MARKETPLACE_INVENTORY_QML_PATH);
+                tablet.sendToQml({
+                    method: 'updateInventory',
+                    referrerURL: parsedJsonMessage.referrerURL
+                });
             }
         }
     }
@@ -199,17 +206,23 @@
                 break;
             case 'checkout_buyClicked':
                 if (message.success === true) {
-                    tablet.gotoWebScreen(message.itemHref);
+                    tablet.gotoWebScreen(MARKETPLACE_URL + '/items/' + message.itemId, MARKETPLACES_INJECT_SCRIPT_URL);
-                    Script.setTimeout(function () {
-                        tablet.gotoWebScreen(MARKETPLACE_URL + '/items/' + message.itemId, MARKETPLACES_INJECT_SCRIPT_URL);
-                    }, 100);
                 } else {
                     tablet.sendToQml({ method: 'buyFailed' });
                 }
                 //tablet.popFromStack();
                 break;
+            case 'inventory_itemClicked':
+                var itemId = message.itemId;
+                if (itemId && itemId !== "") {
+                    tablet.gotoWebScreen(MARKETPLACE_URL + '/items/' + itemId, MARKETPLACES_INJECT_SCRIPT_URL);
+                }
+                break;
+            case 'inventory_backClicked':
+                tablet.gotoWebScreen(message.referrerURL, MARKETPLACES_INJECT_SCRIPT_URL);
+                break;
             default:
-                print('Unrecognized message from Checkout.qml: ' + JSON.stringify(message));
+                print('Unrecognized message from Checkout.qml or Inventory.qml: ' + JSON.stringify(message));
         }
     }