Merge pull request #11143 from zfox23/commerce_CheckoutQMLInvestigation

Add skeleton "Checkout" page for Marketplace items

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

@@ -0,0 +1,303 @@
+//
+//  Checkout.qml
+//  qml/hifi/commerce
+//
+//  Checkout
+//
+//  Created by Zach Fox on 2017-08-07
+//  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: checkoutRoot;
+    property string itemId; 
+    // Style
+    color: hifi.colors.baseGray;
+
+    //
+    // TITLE BAR START
+    //
+    Item {
+        id: titleBarContainer;
+        // Size
+        width: checkoutRoot.width;
+        height: 50;
+        // Anchors
+        anchors.left: parent.left;
+        anchors.top: parent.top;
+
+        // Title Bar text
+        RalewaySemiBold {
+            id: titleBarText;
+            text: "Checkout";
+            // 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
+    //
+    
+    //
+    // ITEM DESCRIPTION START
+    //
+    Item {
+        id: itemDescriptionContainer;
+        // Size
+        width: checkoutRoot.width;
+        height: childrenRect.height + 20;
+        // Anchors
+        anchors.left: parent.left;
+        anchors.top: titleBarContainer.bottom;
+
+        // Item Name text
+        Item {
+            id: itemNameContainer; 
+            // Anchors
+            anchors.top: parent.top;
+            anchors.topMargin: 4;
+            anchors.left: parent.left;
+            anchors.leftMargin: 16;
+            anchors.right: parent.right;
+            anchors.rightMargin: 16;
+            height: childrenRect.height;
+
+            RalewaySemiBold {
+                id: itemNameTextLabel;
+                text: "Item Name:";
+                // Anchors
+                anchors.top: parent.top;
+                anchors.left: parent.left;
+                width: paintedWidth;
+                // Text size
+                size: 16;
+                // Style
+                color: hifi.colors.lightGrayText;
+                // Alignment
+                horizontalAlignment: Text.AlignHLeft;
+                verticalAlignment: Text.AlignVCenter;
+            }
+            RalewayRegular {
+                id: itemNameText;
+                // Text size
+                size: itemNameTextLabel.size;
+                // Anchors
+                anchors.top: parent.top;
+                anchors.left: itemNameTextLabel.right;
+                anchors.leftMargin: 16;
+                width: paintedWidth;
+                // Style
+                color: hifi.colors.lightGrayText;
+                // Alignment
+                horizontalAlignment: Text.AlignHLeft;
+                verticalAlignment: Text.AlignVCenter;
+            }
+        }
+    
+        
+        // Item Author text
+        Item {
+            id: itemAuthorContainer; 
+            // Anchors
+            anchors.top: itemNameContainer.bottom;
+            anchors.topMargin: 4;
+            anchors.left: parent.left;
+            anchors.leftMargin: 16;
+            anchors.right: parent.right;
+            anchors.rightMargin: 16;
+            height: childrenRect.height;
+
+            RalewaySemiBold {
+                id: itemAuthorTextLabel;
+                text: "Item Author:";
+                // Anchors
+                anchors.top: parent.top;
+                anchors.left: parent.left;
+                width: paintedWidth;
+                // Text size
+                size: 16;
+                // Style
+                color: hifi.colors.lightGrayText;
+                // Alignment
+                horizontalAlignment: Text.AlignHLeft;
+                verticalAlignment: Text.AlignVCenter;
+            }
+            RalewayRegular {
+                id: itemAuthorText;
+                // Text size
+                size: itemAuthorTextLabel.size;
+                // Anchors
+                anchors.top: parent.top;
+                anchors.left: itemAuthorTextLabel.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.topMargin: 4;
+            anchors.left: parent.left;
+            anchors.leftMargin: 16;
+            anchors.right: parent.right;
+            anchors.rightMargin: 16;
+            height: childrenRect.height;
+
+            RalewaySemiBold {
+                id: itemPriceTextLabel;
+                text: "Item Price:";
+                // 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: itemPriceText;
+                // Text size
+                size: itemPriceTextLabel.size;
+                // Anchors
+                anchors.top: parent.top;
+                anchors.left: itemPriceTextLabel.right;
+                anchors.leftMargin: 16;
+                width: paintedWidth;
+                // Style
+                color: hifi.colors.lightGrayText;
+                // Alignment
+                horizontalAlignment: Text.AlignHLeft;
+                verticalAlignment: Text.AlignVCenter;
+            }
+        }
+    }
+    //
+    // ITEM DESCRIPTION END
+    //
+
+    
+    //
+    // ACTION BUTTONS START
+    //
+    Item {
+        id: actionButtonsContainer;
+        // Size
+        width: checkoutRoot.width;
+        height: 40;
+        // Anchors
+        anchors.left: parent.left;
+        anchors.top: itemDescriptionContainer.bottom;
+
+        // "Cancel" button
+        HifiControlsUit.Button {
+            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: "Cancel"
+            onClicked: {
+                sendToScript({method: 'checkout_cancelClicked', params: itemId});
+            }
+        }
+
+        // "Buy" button
+        HifiControlsUit.Button {
+            color: hifi.buttons.black;
+            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: "Buy"
+            onClicked: {
+                sendToScript({method: 'checkout_buyClicked', params: itemId});
+            }
+        }
+    }
+    //
+    // 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 'updateCheckoutQML':
+                itemId = message.params.itemId;
+                itemNameText.text = message.params.itemName;
+                itemAuthorText.text = message.params.itemAuthor;
+                itemPriceText.text = message.params.itemPrice;
+            break;
+            default:
+                console.log('Unrecognized message from marketplaces.js:', JSON.stringify(message));
+        }
+    }
+    signal sendToScript(var message);
+
+    //
+    // FUNCTION DEFINITIONS END
+    //
+}

interface/src/ui/overlays/ContextOverlayInterface.cpp

@@ -250,7 +250,8 @@ void ContextOverlayInterface::openMarketplace() {
         auto tablet = dynamic_cast<TabletProxy*>(_tabletScriptingInterface->getTablet("com.highfidelity.interface.tablet.system"));
         // construct the url to the marketplace item
         QString url = MARKETPLACE_BASE_URL + _entityMarketplaceID;
-        tablet->gotoWebScreen(url);
+        QString MARKETPLACES_INJECT_SCRIPT_PATH = "file:///" + qApp->applicationDirPath() + "/scripts/system/html/js/marketplacesInject.js";
+        tablet->gotoWebScreen(url, MARKETPLACES_INJECT_SCRIPT_PATH);
         _hmdScriptingInterface->openTablet();
         _isInMarketplaceInspectionMode = true;
     }

scripts/system/html/js/marketplacesInject.js

@@ -25,6 +25,8 @@
     var canWriteAssets = false;
     var xmlHttpRequest = null;
     var isPreparing = false;  // Explicitly track download request status.
+
+    var confirmAllPurchases = false; // Set this to "true" to cause Checkout.qml to popup for all items, even if free
     
     function injectCommonCode(isDirectoryPage) {
 
@@ -65,7 +67,7 @@
 
         // Footer actions.
         $("#back-button").on("click", function () {
-            (window.history.state != null) ? window.history.back() : window.location = "https://metaverse.highfidelity.com/marketplace?";
+            (document.referrer !== "") ? window.history.back() : window.location = "https://metaverse.highfidelity.com/marketplace?";
         });
         $("#all-markets").on("click", function () {
             EventBridge.emitWebEvent(GOTO_DIRECTORY);
@@ -87,8 +89,59 @@
         });
     }
 
+    function buyButtonClicked(id, name, author, price) {
+        EventBridge.emitWebEvent(JSON.stringify({
+            type: "CHECKOUT",
+            itemId: id,
+            itemName: name,
+            itemAuthor: author,
+            itemPrice: price
+        }));
+    }
+
+    function injectBuyButtonOnMainPage() {
+        $('.grid-item').find('#price-or-edit').find('a').attr('href', '#');
+        $('.grid-item').find('#price-or-edit').find('.price').text("BUY");
+        $('.grid-item').find('#price-or-edit').find('a').on('click', function () {
+            buyButtonClicked($(this).closest('.grid-item').attr('data-item-id'),
+                $(this).closest('.grid-item').find('.item-title').text(),
+                $(this).closest('.grid-item').find('.creator').find('.value').text(),
+                10);
+        });
+    }
+
     function injectHiFiCode() {
-        // Nothing to do.
+        if (confirmAllPurchases) {
+            var target = document.getElementById('templated-items');
+            // MutationObserver is necessary because the DOM is populated after the page is loaded.
+            // We're searching for changes to the element whose ID is '#templated-items' - this is
+            //     the element that gets filled in by the AJAX.
+            var observer = new MutationObserver(function (mutations) {
+                mutations.forEach(function (mutation) {
+                    injectBuyButtonOnMainPage();
+                });
+                //observer.disconnect();
+            });
+            var config = { attributes: true, childList: true, characterData: true };
+            observer.observe(target, config);
+
+            // 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();
+        }
+    }
+
+    function injectHiFiItemPageCode() {
+        if (confirmAllPurchases) {
+            $('#side-info').find('.btn').attr('href', '#');
+            $('#side-info').find('.btn').html('<span class="glyphicon glyphicon-download"></span>Buy Item  ');
+            $('#side-info').find('.btn').on('click', function () {
+                buyButtonClicked(window.location.pathname.split("/")[3],
+                    $('#top-center').find('h1').text(),
+                    $('#creator').find('.value').text(),
+                    10);
+            });
+        }
     }
 
     function updateClaraCode() {
@@ -323,9 +376,11 @@
         var DIRECTORY = 0;
         var HIFI = 1;
         var CLARA = 2;
+        var HIFI_ITEM_PAGE = 3;
         var pageType = DIRECTORY;
 
         if (location.href.indexOf("highfidelity.com/") !== -1) { pageType = HIFI; }
+        if (location.href.indexOf("highfidelity.com/marketplace/items/") !== -1) { pageType = HIFI_ITEM_PAGE; }
         if (location.href.indexOf("clara.io/") !== -1) { pageType = CLARA; }
 
         injectCommonCode(pageType === DIRECTORY);
@@ -336,6 +391,9 @@
             case HIFI:
                 injectHiFiCode();
                 break;
+            case HIFI_ITEM_PAGE:
+                injectHiFiItemPageCode();
+                break;
             case CLARA:
                 injectClaraCode();
                 break;

scripts/system/marketplaces/marketplaces.js

@@ -19,6 +19,7 @@
     var MARKETPLACE_URL_INITIAL = MARKETPLACE_URL + "?";  // Append "?" to signal injected script that it's the initial page.
     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 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";
@@ -58,6 +59,11 @@
         UserActivityLogger.openedMarketplace();
         tablet.gotoWebScreen(MARKETPLACE_URL_INITIAL, MARKETPLACES_INJECT_SCRIPT_URL);
         tablet.webEventReceived.connect(function (message) {
+            var parsedJsonMessage = JSON.parse(message);
+            if (parsedJsonMessage.type === "CHECKOUT") {
+                tablet.sendToQml({ method: 'updateCheckoutQML', params: parsedJsonMessage });
+                tablet.pushOntoStack(MARKETPLACE_CHECKOUT_QML_PATH);
+            }
 
             if (message === GOTO_DIRECTORY) {
                 tablet.gotoWebScreen(MARKETPLACES_URL, MARKETPLACES_INJECT_SCRIPT_URL);
@@ -124,7 +130,8 @@
     }
 
     function onScreenChanged(type, url) {
-        onMarketplaceScreen = type === "Web" && url === MARKETPLACE_URL_INITIAL
+        onMarketplaceScreen = type === "Web" && url === MARKETPLACE_URL_INITIAL;
+        wireEventBridge(type === "QML" && url === MARKETPLACE_CHECKOUT_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) {
@@ -147,4 +154,54 @@
         Entities.canWriteAssetsChanged.disconnect(onCanWriteAssetsChanged);
     });
 
+
+
+    // Function Name: wireEventBridge()
+    //
+    // Description:
+    //   -Used to connect/disconnect the script's response to the tablet's "fromQml" signal. Set the "on" argument to enable or
+    //    disable to event bridge.
+    //
+    // Relevant Variables:
+    //   -hasEventBridge: true/false depending on whether we've already connected the event bridge.
+    var hasEventBridge = false;
+    function wireEventBridge(on) {
+        if (!tablet) {
+            print("Warning in wireEventBridge(): 'tablet' undefined!");
+            return;
+        }
+        if (on) {
+            if (!hasEventBridge) {
+                tablet.fromQml.connect(fromQml);
+                hasEventBridge = true;
+            }
+        } else {
+            if (hasEventBridge) {
+                tablet.fromQml.disconnect(fromQml);
+                hasEventBridge = false;
+            }
+        }
+    }
+
+    // Function Name: fromQml()
+    //
+    // Description:
+    //   -Called when a message is received from Checkout.qml. The "message" argument is what is sent from the Checkout QML
+    //    in the format "{method, params}", like json-rpc.
+    function fromQml(message) {
+        switch (message.method) {
+            case 'checkout_cancelClicked':
+                tablet.gotoWebScreen(MARKETPLACE_URL + '/items/' + message.params, MARKETPLACES_INJECT_SCRIPT_URL);
+                // TODO: Make Marketplace a QML app that's a WebView wrapper so we can use the app stack.
+                // I don't think this is trivial to do since we also want to inject some JS into the DOM.
+                //tablet.popFromStack();
+                break;
+            case 'checkout_buyClicked':
+                //tablet.popFromStack();
+                break;
+            default:
+                print('Unrecognized message from Checkout.qml: ' + JSON.stringify(message));
+        }
+    }
+
 }()); // END LOCAL_SCOPE