diff --git a/interface/resources/qml/hifi/commerce/Checkout.qml b/interface/resources/qml/hifi/commerce/Checkout.qml
deleted file mode 100644
index d9b0072917..0000000000
--- a/interface/resources/qml/hifi/commerce/Checkout.qml
+++ /dev/null
@@ -1,463 +0,0 @@
-//
-// 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
-import "./wallet" as HifiWallet
-
-// references XXX from root context
-
-Rectangle {
- HifiConstants { id: hifi; }
-
- id: checkoutRoot;
- property bool inventoryReceived: false;
- property bool balanceReceived: false;
- property string itemId: "";
- property string itemHref: "";
- property int balanceAfterPurchase: 0;
- property bool alreadyOwned: false;
- property int itemPriceFull: 0;
- // Style
- color: hifi.colors.baseGray;
- Hifi.QmlCommerce {
- id: commerce;
- onBuyResult: {
- if (result.status !== 'success') {
- buyButton.text = result.message;
- buyButton.enabled = false;
- } else {
- if (urlHandler.canHandleUrl(itemHref)) {
- urlHandler.handleUrl(itemHref);
- }
- sendToScript({method: 'checkout_buySuccess', itemId: itemId});
- }
- }
- onBalanceResult: {
- if (result.status !== 'success') {
- console.log("Failed to get balance", result.message);
- } else {
- balanceReceived = true;
- hfcBalanceText.text = parseFloat(result.data.balance/100).toFixed(2);
- balanceAfterPurchase = parseFloat(result.data.balance/100) - parseFloat(checkoutRoot.itemPriceFull/100).toFixed(2);
- }
- }
- onInventoryResult: {
- if (result.status !== 'success') {
- console.log("Failed to get inventory", result.message);
- } else {
- inventoryReceived = true;
- console.log('inventory fixme', JSON.stringify(result));
- if (inventoryContains(result.data.assets, itemId)) {
- alreadyOwned = true;
- } else {
- alreadyOwned = false;
- }
- }
- }
- }
-
- //
- // 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.top: parent.top;
- anchors.left: parent.left;
- anchors.leftMargin: 16;
- anchors.bottom: parent.bottom;
- width: paintedWidth;
- // 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;
- }
- }
-
- // 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: "--";
- // 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: hfcBalanceContainer.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;
- }
- }
-
- // 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
- //
-
-
- //
- // ACTION BUTTONS START
- //
- Item {
- id: actionButtonsContainer;
- // Size
- width: checkoutRoot.width;
- height: 40;
- // Anchors
- anchors.left: parent.left;
- anchors.bottom: parent.bottom;
- anchors.bottomMargin: 8;
-
- // "Cancel" button
- HifiControlsUit.Button {
- id: cancelButton;
- 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 {
- id: buyButton;
- enabled: balanceAfterPurchase >= 0 && inventoryReceived && balanceReceived;
- 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: (inventoryReceived && balanceReceived) ? (alreadyOwned ? "Already Owned: Get Item" : "Buy") : "--";
- onClicked: {
- if (!alreadyOwned) {
- commerce.buy(itemId, parseFloat(itemPriceText.text*100));
- } else {
- if (urlHandler.canHandleUrl(itemHref)) {
- urlHandler.handleUrl(itemHref);
- }
- sendToScript({method: 'checkout_buySuccess', itemId: 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;
- checkoutRoot.itemPriceFull = message.params.itemPrice;
- itemPriceText.text = parseFloat(checkoutRoot.itemPriceFull/100).toFixed(2);
- itemHref = message.params.itemHref;
- commerce.balance();
- commerce.inventory();
- break;
- default:
- console.log('Unrecognized message from marketplaces.js:', JSON.stringify(message));
- }
- }
- signal sendToScript(var message);
-
- function inventoryContains(inventoryJson, id) {
- for (var idx = 0; idx < inventoryJson.length; idx++) {
- if(inventoryJson[idx].id === id) {
- return true;
- }
- }
- return false;
- }
-
- //
- // FUNCTION DEFINITIONS END
- //
-}
diff --git a/interface/resources/qml/hifi/commerce/checkout/Checkout.qml b/interface/resources/qml/hifi/commerce/checkout/Checkout.qml
new file mode 100644
index 0000000000..bb38b46bbf
--- /dev/null
+++ b/interface/resources/qml/hifi/commerce/checkout/Checkout.qml
@@ -0,0 +1,705 @@
+//
+// 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
+import "../wallet" as HifiWallet
+
+// references XXX from root context
+
+Rectangle {
+ HifiConstants { id: hifi; }
+
+ id: root;
+ property string activeView: "checkoutMain";
+ property bool inventoryReceived: false;
+ property bool balanceReceived: false;
+ property string itemId: "";
+ property string itemHref: "";
+ property int balanceAfterPurchase: 0;
+ property bool alreadyOwned: false;
+ property int itemPriceFull: 0;
+ // Style
+ color: hifi.colors.baseGray;
+ Hifi.QmlCommerce {
+ id: commerce;
+
+ onSecurityImageResult: {
+ if (!exists) { // "If security image is not set up"
+ if (root.activeView !== "notSetUp") {
+ notSetUp.visible = true;
+ }
+ }
+ }
+
+ onKeyFilePathResult: {
+ if (path === "" && root.activeView !== "notSetUp") {
+ notSetUp.visible = true;
+ }
+ }
+
+ onBuyResult: {
+ if (result.status !== 'success') {
+ buyButton.text = result.message;
+ buyButton.enabled = false;
+ } else {
+ if (urlHandler.canHandleUrl(itemHref)) {
+ urlHandler.handleUrl(itemHref);
+ }
+ sendToScript({method: 'checkout_buySuccess', itemId: itemId});
+ }
+ }
+ onBalanceResult: {
+ if (result.status !== 'success') {
+ console.log("Failed to get balance", result.message);
+ } else {
+ balanceReceived = true;
+ hfcBalanceText.text = parseFloat(result.data.balance/100).toFixed(2);
+ balanceAfterPurchase = parseFloat(result.data.balance/100) - parseFloat(root.itemPriceFull/100).toFixed(2);
+ }
+ }
+ onInventoryResult: {
+ if (result.status !== 'success') {
+ console.log("Failed to get inventory", result.message);
+ } else {
+ inventoryReceived = true;
+ console.log('inventory fixme', JSON.stringify(result));
+ if (inventoryContains(result.data.assets, itemId)) {
+ alreadyOwned = true;
+ } else {
+ alreadyOwned = false;
+ }
+ }
+ }
+ }
+
+
+ //
+ // TITLE BAR START
+ //
+ Item {
+ id: titleBarContainer;
+ // Size
+ width: parent.width;
+ height: 50;
+ // Anchors
+ anchors.left: parent.left;
+ anchors.top: parent.top;
+
+ // Title Bar text
+ RalewaySemiBold {
+ id: titleBarText;
+ text: "WALLET";
+ // Text size
+ size: hifi.fontSizes.overlayTitle;
+ // Anchors
+ anchors.top: parent.top;
+ anchors.left: parent.left;
+ anchors.leftMargin: 16;
+ anchors.bottom: parent.bottom;
+ width: paintedWidth;
+ // Style
+ color: hifi.colors.faintGray;
+ // 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
+ //
+
+ //
+ // "WALLET NOT SET UP" START
+ //
+ Item {
+ id: notSetUp;
+ visible: root.activeView === "notSetUp";
+ anchors.top: titleBarContainer.bottom;
+ anchors.bottom: root.bottom;
+
+ RalewayRegular {
+ id: notSetUpText;
+ text: "Set up your Wallet (no credit card necessary) to claim your free 100 HFC " +
+ "and get items from the Marketplace.";
+ // Text size
+ size: 18;
+ // Anchors
+ anchors.top: parent.top;
+ anchors.topMargin: 50;
+ anchors.bottom: notSetUpActionButtonsContainer.top;
+ anchors.left: parent.left;
+ anchors.right: parent.right;
+ // Style
+ color: hifi.colors.faintGray;
+ wrapMode: Text.WordWrap;
+ // Alignment
+ horizontalAlignment: Text.AlignHCenter;
+ verticalAlignment: Text.AlignVCenter;
+ }
+
+ Item {
+ id: notSetUpActionButtonsContainer;
+ // Size
+ width: root.width;
+ height: 40;
+ // Anchors
+ anchors.left: parent.left;
+ anchors.bottom: parent.bottom;
+ anchors.bottomMargin: 8;
+
+ // "Cancel" button
+ HifiControlsUit.Button {
+ id: cancelButton;
+ 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});
+ }
+ }
+
+ // "Set Up" button
+ HifiControlsUit.Button {
+ id: setUpButton;
+ 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: "Set Up Wallet"
+ onClicked: {
+ sendToScript({method: 'checkout_setupClicked'});
+ }
+ }
+ }
+ }
+ //
+ // "WALLET NOT SET UP" END
+ //
+
+ //
+ // CHECKOUT CONTENTS START
+ //
+ Item {
+ id: checkoutContents;
+ visible: root.activeView === "checkoutMain";
+ anchors.top: titleBarContainer.bottom;
+ anchors.bottom: parent.bottom;
+ anchors.left: parent.left;
+ anchors.right: parent.right;
+
+ //
+ // ITEM DESCRIPTION START
+ //
+ Item {
+ id: itemDescriptionContainer;
+ // Size
+ width: parent.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;
+ }
+ }
+
+ // 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: "--";
+ // 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: hfcBalanceContainer.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;
+ }
+ }
+
+ // 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
+ //
+
+
+ //
+ // ACTION BUTTONS AND TEXT START
+ //
+ Item {
+ id: actionButtonsContainer;
+ // Size
+ width: root.width;
+ height: 130;
+ // Anchors
+ anchors.left: parent.left;
+ anchors.bottom: parent.bottom;
+ anchors.bottomMargin: 8;
+
+ // "Cancel" button
+ HifiControlsUit.Button {
+ id: cancelButton;
+ color: hifi.buttons.black;
+ colorScheme: hifi.colorSchemes.dark;
+ anchors.top: parent.top;
+ anchors.topMargin: 3;
+ height: 40;
+ 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 {
+ id: buyButton;
+ enabled: balanceAfterPurchase >= 0 && inventoryReceived && balanceReceived;
+ color: hifi.buttons.black;
+ colorScheme: hifi.colorSchemes.dark;
+ anchors.top: parent.top;
+ anchors.topMargin: 3;
+ height: 40;
+ anchors.right: parent.right;
+ anchors.rightMargin: 20;
+ width: parent.width/2 - anchors.rightMargin*2;
+ text: (inventoryReceived && balanceReceived) ? ("Buy") : "--";
+ onClicked: {
+ commerce.buy(itemId, itemPriceFull);
+ }
+ }
+
+ RalewayRegular {
+ id: buyText;
+ text: "This item will be added to your Inventory, which can be accessed from Marketplace.";
+ // Text size
+ size: 24;
+ // Anchors
+ anchors.bottom: parent.bottom;
+ anchors.bottomMargin: 10;
+ height: paintedHeight;
+ anchors.left: parent.left;
+ anchors.right: parent.right;
+ // Style
+ color: hifi.colors.faintGray;
+ wrapMode: Text.WordWrap;
+ // Alignment
+ horizontalAlignment: Text.AlignHCenter;
+ verticalAlignment: Text.AlignVCenter;
+ }
+ }
+ //
+ // ACTION BUTTONS END
+ //
+ }
+ //
+ // CHECKOUT CONTENTS END
+ //
+
+ //
+ // CHECKOUT SUCCESS START
+ //
+ Item {
+ id: checkoutSuccess;
+ visible: root.activeView === "checkoutSuccess";
+ anchors.top: titleBarContainer.bottom;
+ anchors.bottom: root.bottom;
+ anchors.left: parent.left;
+ anchors.right: parent.right;
+
+ RalewayRegular {
+ id: completeText;
+ text: "Purchase Complete.
You bought " + itemNameText.text + " by " itemAuthorText.text;
+ // Text size
+ size: 24;
+ // Anchors
+ anchors.top: parent.top;
+ anchors.topMargin: 10;
+ height: paintedHeight;
+ anchors.left: parent.left;
+ anchors.right: parent.right;
+ // Style
+ color: hifi.colors.faintGray;
+ wrapMode: Text.WordWrap;
+ // Alignment
+ horizontalAlignment: Text.AlignHCenter;
+ verticalAlignment: Text.AlignVCenter;
+ }
+
+ Item {
+ id: actionButtonsContainer;
+ // Size
+ width: root.width;
+ height: 130;
+ // Anchors
+ anchors.top: completeText.bottom;
+ anchors.topMargin: 10;
+ anchors.left: parent.left;
+ anchors.right: parent.right;
+ height: 50;
+
+ // "Rez Now!" button
+ HifiControlsUit.Button {
+ id: rezNowButton;
+ 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: "Rez Now!"
+ onClicked: {
+ if (urlHandler.canHandleUrl(itemHref)) {
+ urlHandler.handleUrl(itemHref);
+ }
+ }
+ }
+
+ // "Inventory" button
+ HifiControlsUit.Button {
+ id: inventoryButton;
+ 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: "View Inventory";
+ onClicked: {
+ sendToScript({method: 'checkout_goToInventory'});
+ }
+ }
+ }
+
+ Item {
+ id: continueShoppingButtonContainer;
+ // Size
+ width: root.width;
+ height: 130;
+ // Anchors
+ anchors.left: parent.left;
+ anchors.bottom: parent.bottom;
+ anchors.bottomMargin: 8;
+ // "Continue Shopping" button
+ HifiControlsUit.Button {
+ id: continueShoppingButton;
+ 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: "Continue Shopping";
+ onClicked: {
+ if (!alreadyOwned) {
+ commerce.buy(itemId, parseFloat(itemPriceText.text*100));
+ } else {
+ if (urlHandler.canHandleUrl(itemHref)) {
+ urlHandler.handleUrl(itemHref);
+ }
+ sendToScript({method: 'checkout_continueShopping', itemId: itemId});
+ }
+ }
+ }
+ }
+ }
+ //
+ // CHECKOUT SUCCESS 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;
+ root.itemPriceFull = message.params.itemPrice;
+ itemPriceText.text = parseFloat(root.itemPriceFull/100).toFixed(2);
+ itemHref = message.params.itemHref;
+ commerce.balance();
+ commerce.inventory();
+ break;
+ default:
+ console.log('Unrecognized message from marketplaces.js:', JSON.stringify(message));
+ }
+ }
+ signal sendToScript(var message);
+
+ function inventoryContains(inventoryJson, id) {
+ for (var idx = 0; idx < inventoryJson.length; idx++) {
+ if(inventoryJson[idx].id === id) {
+ return true;
+ }
+ }
+ return false;
+ }
+
+ //
+ // FUNCTION DEFINITIONS END
+ //
+}
diff --git a/interface/resources/qml/hifi/commerce/images/01cat.jpg b/interface/resources/qml/hifi/commerce/images/01cat.jpg
deleted file mode 100644
index 6e7897cb82..0000000000
Binary files a/interface/resources/qml/hifi/commerce/images/01cat.jpg and /dev/null differ
diff --git a/interface/resources/qml/hifi/commerce/images/02car.jpg b/interface/resources/qml/hifi/commerce/images/02car.jpg
deleted file mode 100644
index 5dd8091e57..0000000000
Binary files a/interface/resources/qml/hifi/commerce/images/02car.jpg and /dev/null differ
diff --git a/interface/resources/qml/hifi/commerce/images/03dog.jpg b/interface/resources/qml/hifi/commerce/images/03dog.jpg
deleted file mode 100644
index 4a85b80c0c..0000000000
Binary files a/interface/resources/qml/hifi/commerce/images/03dog.jpg and /dev/null differ
diff --git a/interface/resources/qml/hifi/commerce/images/04stars.jpg b/interface/resources/qml/hifi/commerce/images/04stars.jpg
deleted file mode 100644
index 8f2bf62f83..0000000000
Binary files a/interface/resources/qml/hifi/commerce/images/04stars.jpg and /dev/null differ
diff --git a/interface/resources/qml/hifi/commerce/images/05plane.jpg b/interface/resources/qml/hifi/commerce/images/05plane.jpg
deleted file mode 100644
index 6504459d8b..0000000000
Binary files a/interface/resources/qml/hifi/commerce/images/05plane.jpg and /dev/null differ
diff --git a/interface/resources/qml/hifi/commerce/images/06gingerbread.jpg b/interface/resources/qml/hifi/commerce/images/06gingerbread.jpg
deleted file mode 100644
index 54c37faa2f..0000000000
Binary files a/interface/resources/qml/hifi/commerce/images/06gingerbread.jpg and /dev/null differ
diff --git a/interface/resources/qml/hifi/commerce/Inventory.qml b/interface/resources/qml/hifi/commerce/inventory/Inventory.qml
similarity index 100%
rename from interface/resources/qml/hifi/commerce/Inventory.qml
rename to interface/resources/qml/hifi/commerce/inventory/Inventory.qml
diff --git a/scripts/system/marketplaces/marketplaces.js b/scripts/system/marketplaces/marketplaces.js
index 84d7d44689..a1df4f998c 100644
--- a/scripts/system/marketplaces/marketplaces.js
+++ b/scripts/system/marketplaces/marketplaces.js
@@ -19,9 +19,9 @@
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 MARKETPLACE_INVENTORY_QML_PATH = Script.resourcesPath() + "qml/hifi/commerce/Inventory.qml";
- var MARKETPLACE_SECURITY_QML_PATH = Script.resourcesPath() + "qml/hifi/commerce/SecurityImageSelection.qml";
+ var MARKETPLACE_CHECKOUT_QML_PATH = Script.resourcesPath() + "qml/hifi/commerce/checkout/Checkout.qml";
+ var MARKETPLACE_INVENTORY_QML_PATH = Script.resourcesPath() + "qml/hifi/commerce/inventory/Inventory.qml";
+ var MARKETPLACE_WALLET_QML_PATH = Script.resourcesPath() + "qml/hifi/commerce/wallet/Wallet.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";
@@ -88,7 +88,7 @@
function onScreenChanged(type, url) {
onMarketplaceScreen = type === "Web" && url === MARKETPLACE_URL_INITIAL;
- wireEventBridge(type === "QML" && (url === MARKETPLACE_CHECKOUT_QML_PATH || url === MARKETPLACE_INVENTORY_QML_PATH || url === MARKETPLACE_SECURITY_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) {
@@ -199,13 +199,23 @@
// in the format "{method, params}", like json-rpc.
function fromQml(message) {
switch (message.method) {
+ case 'checkout_setUpClicked':
+ tablet.pushOntoStack(MARKETPLACE_WALLET_QML_PATH);
+ break;
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_buySuccess':
+ case 'checkout_goToInventory':
+ tablet.pushOntoStack(MARKETPLACE_INVENTORY_QML_PATH);
+ tablet.sendToQml({
+ method: 'updateInventory',
+ referrerURL: MARKETPLACE_URL_INITIAL
+ });
+ break;
+ case 'checkout_continueShopping':
tablet.gotoWebScreen(MARKETPLACE_URL + '/items/' + message.itemId, MARKETPLACES_INJECT_SCRIPT_URL);
//tablet.popFromStack();
break;
@@ -218,11 +228,8 @@
case 'inventory_backClicked':
tablet.gotoWebScreen(message.referrerURL, MARKETPLACES_INJECT_SCRIPT_URL);
break;
- case 'securityImageSelection_cancelClicked':
- tablet.gotoWebScreen(message.referrerURL, MARKETPLACES_INJECT_SCRIPT_URL);
- break;
default:
- print('Unrecognized message from Checkout.qml, Inventory.qml, or SecurityImageSelection.qml: ' + JSON.stringify(message));
+ print('Unrecognized message from Checkout.qml or Inventory.qml: ' + JSON.stringify(message));
}
}