From 8d3c394d00dedc9f53c0dfe82499047c55ad133a Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Thu, 24 Aug 2017 16:21:41 -0700 Subject: [PATCH] More progress --- .../qml/hifi/commerce/checkout/Checkout.qml | 266 ++++++++++++------ 1 file changed, 179 insertions(+), 87 deletions(-) diff --git a/interface/resources/qml/hifi/commerce/checkout/Checkout.qml b/interface/resources/qml/hifi/commerce/checkout/Checkout.qml index 5373a4abbd..3beee2bb56 100644 --- a/interface/resources/qml/hifi/commerce/checkout/Checkout.qml +++ b/interface/resources/qml/hifi/commerce/checkout/Checkout.qml @@ -39,16 +39,14 @@ Rectangle { id: commerce; onSecurityImageResult: { - if (!exists) { // "If security image is not set up" - if (root.activeView !== "notSetUp") { - notSetUp.visible = true; - } + if (!exists && root.activeView !== "notSetUp") { // "If security image is not set up" + root.activeView = "notSetUp"; } } onKeyFilePathResult: { if (path === "" && root.activeView !== "notSetUp") { - notSetUp.visible = true; + root.activeView = "notSetUp"; } } @@ -61,21 +59,22 @@ Rectangle { root.activeView = "checkoutSuccess"; } } + onBalanceResult: { if (result.status !== 'success') { console.log("Failed to get balance", result.data.message); } else { balanceReceived = true; - hfcBalanceText.text = parseFloat(result.data.balance/100).toFixed(2); + hfcBalanceText.text = (parseFloat(result.data.balance/100).toFixed(2)) + " HFC"; balanceAfterPurchase = parseFloat(result.data.balance/100) - parseFloat(root.itemPriceFull/100).toFixed(2); } } + onInventoryResult: { if (result.status !== 'success') { console.log("Failed to get inventory", result.data.message); } else { inventoryReceived = true; - console.log('inventory fixme', JSON.stringify(result)); if (inventoryContains(result.data.assets, itemId)) { alreadyOwned = true; } else { @@ -139,7 +138,7 @@ Rectangle { RalewayRegular { id: notSetUpText; - text: "Set up your Wallet (no credit card necessary) to claim your free 100 HFC " + + text: "Set up your Wallet (no credit card necessary) to claim your free HFC " + "and get items from the Marketplace."; // Text size size: 18; @@ -225,18 +224,68 @@ Rectangle { Item { id: itemDescriptionContainer; // Size - width: parent.width; height: childrenRect.height + 20; // Anchors anchors.left: parent.left; + anchors.leftMargin: 32; + anchors.right: parent.right; + anchors.rightMargin: 32; anchors.top: titleBarContainer.bottom; + // HFC Balance text + Item { + id: hfcBalanceContainer; + // Anchors + anchors.top: parent.top; + anchors.topMargin: 30; + anchors.left: parent.left; + anchors.leftMargin: 16; + anchors.right: parent.right; + anchors.rightMargin: 16; + height: childrenRect.height; + + RalewaySemiBold { + id: hfcBalanceTextLabel; + text: "Balance:"; + // Anchors + anchors.top: parent.top; + anchors.left: parent.left; + width: paintedWidth; + height: paintedHeight; + // Text size + size: 30; + // Style + color: hifi.colors.lightGrayText; + // Alignment + horizontalAlignment: Text.AlignLeft; + verticalAlignment: Text.AlignVCenter; + } + RalewayRegular { + id: hfcBalanceText; + text: "-- HFC"; + // Text size + size: hfcBalanceTextLabel.size; + // Anchors + anchors.top: parent.top; + anchors.left: hfcBalanceTextLabel.right; + anchors.leftMargin: 16; + anchors.right: parent.right; + anchors.rightMargin: 16; + height: paintedHeight; + // Style + color: hifi.colors.lightGrayText; + // Alignment + horizontalAlignment: Text.AlignRight; + verticalAlignment: Text.AlignVCenter; + } + } + // Item Name text Item { id: itemNameContainer; // Anchors - anchors.top: parent.top; - anchors.topMargin: 4; + anchors.top: hfcBalanceContainer.bottom; + anchors.topMargin: 32; anchors.left: parent.left; anchors.leftMargin: 16; anchors.right: parent.right; @@ -245,17 +294,19 @@ Rectangle { RalewaySemiBold { id: itemNameTextLabel; - text: "Item Name:"; + text: "Item:"; // Anchors - anchors.top: parent.top; + anchors.top: hfcBalanceContainer.bottom; + anchors.topMargin: 20; anchors.left: parent.left; width: paintedWidth; + height: paintedHeight; // Text size - size: 16; + size: 20; // Style color: hifi.colors.lightGrayText; // Alignment - horizontalAlignment: Text.AlignHLeft; + horizontalAlignment: Text.AlignLeft; verticalAlignment: Text.AlignVCenter; } RalewayRegular { @@ -266,11 +317,14 @@ Rectangle { anchors.top: parent.top; anchors.left: itemNameTextLabel.right; anchors.leftMargin: 16; - width: paintedWidth; + anchors.right: parent.right; + anchors.rightMargin: 16; + height: paintedHeight; // Style color: hifi.colors.lightGrayText; + elide: Text.ElideRight; // Alignment - horizontalAlignment: Text.AlignHLeft; + horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignVCenter; } } @@ -290,17 +344,18 @@ Rectangle { RalewaySemiBold { id: itemAuthorTextLabel; - text: "Item Author:"; + text: "Author:"; // Anchors anchors.top: parent.top; anchors.left: parent.left; width: paintedWidth; + height: paintedHeight; // Text size - size: 16; + size: 20; // Style color: hifi.colors.lightGrayText; // Alignment - horizontalAlignment: Text.AlignHLeft; + horizontalAlignment: Text.AlignLeft; verticalAlignment: Text.AlignVCenter; } RalewayRegular { @@ -311,56 +366,14 @@ Rectangle { anchors.top: parent.top; anchors.left: itemAuthorTextLabel.right; anchors.leftMargin: 16; - width: paintedWidth; + anchors.right: parent.right; + anchors.rightMargin: 16; + height: paintedHeight; // Style color: hifi.colors.lightGrayText; + elide: Text.ElideRight; // 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; + horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignVCenter; } } @@ -369,7 +382,7 @@ Rectangle { Item { id: itemPriceContainer; // Anchors - anchors.top: hfcBalanceContainer.bottom; + anchors.top: itemAuthorContainer.bottom; anchors.topMargin: 4; anchors.left: parent.left; anchors.leftMargin: 16; @@ -379,39 +392,43 @@ Rectangle { RalewaySemiBold { id: itemPriceTextLabel; - text: "Item Price:"; + text: "Price:"; // Anchors anchors.top: parent.top; anchors.left: parent.left; width: paintedWidth; + height: paintedHeight; // Text size size: 20; // Style color: hifi.colors.lightGrayText; // Alignment - horizontalAlignment: Text.AlignHLeft; + horizontalAlignment: Text.AlignLeft; verticalAlignment: Text.AlignVCenter; } RalewayRegular { id: itemPriceText; + text: "-- HFC"; // Text size size: itemPriceTextLabel.size; // Anchors anchors.top: parent.top; anchors.left: itemPriceTextLabel.right; anchors.leftMargin: 16; - width: paintedWidth; + anchors.right: parent.right; + anchors.rightMargin: 16; + height: paintedHeight; // Style color: hifi.colors.lightGrayText; // Alignment - horizontalAlignment: Text.AlignHLeft; + horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignVCenter; } } - // HFC "Balance After Purchase" text + // "Quantity" container Item { - id: hfcBalanceAfterPurchaseContainer; + id: quantityContainer; // Anchors anchors.top: itemPriceContainer.bottom; anchors.topMargin: 4; @@ -422,34 +439,86 @@ Rectangle { height: childrenRect.height; RalewaySemiBold { - id: hfcBalanceAfterPurchaseTextLabel; - text: "HFC Balance After Purchase:"; + id: quantityTextLabel; + text: "Quantity:"; // Anchors anchors.top: parent.top; anchors.left: parent.left; width: paintedWidth; + height: paintedHeight; // Text size size: 20; // Style color: hifi.colors.lightGrayText; // Alignment - horizontalAlignment: Text.AlignHLeft; + horizontalAlignment: Text.AlignLeft; + verticalAlignment: Text.AlignVCenter; + } + // ZRF FIXME: MAKE DROPDOWN + RalewayRegular { + id: quantityText; + text: "1"; + // Text size + size: quantityTextLabel.size; + // Anchors + anchors.top: parent.top; + anchors.left: quantityTextLabel.right; + anchors.leftMargin: 16; + anchors.right: parent.right; + anchors.rightMargin: 16; + height: paintedHeight; + // Style + color: hifi.colors.lightGrayText; + // Alignment + horizontalAlignment: Text.AlignRight; + verticalAlignment: Text.AlignVCenter; + } + } + + // "Total Cost" container + Item { + id: totalCostContainer; + // Anchors + anchors.top: quantityContainer.bottom; + anchors.topMargin: 32; + anchors.left: parent.left; + anchors.leftMargin: 16; + anchors.right: parent.right; + anchors.rightMargin: 16; + height: childrenRect.height; + + RalewaySemiBold { + id: totalCostTextLabel; + text: "Total Cost:"; + // Anchors + anchors.top: parent.top; + anchors.left: parent.left; + width: paintedWidth; + height: paintedHeight; + // Text size + size: 30; + // Style + color: hifi.colors.lightGrayText; + // Alignment + horizontalAlignment: Text.AlignLeft; verticalAlignment: Text.AlignVCenter; } RalewayRegular { - id: hfcBalanceAfterPurchaseText; - text: balanceAfterPurchase; + id:totalCostText; + text: "-- HFC"; // Text size - size: hfcBalanceAfterPurchaseTextLabel.size; + size: totalCostTextLabel.size; // Anchors anchors.top: parent.top; - anchors.left: hfcBalanceAfterPurchaseTextLabel.right; + anchors.left: totalCostTextLabel.right; anchors.leftMargin: 16; - width: paintedWidth; + anchors.right: parent.right; + anchors.rightMargin: 16; + height: paintedHeight; // Style color: (balanceAfterPurchase >= 0) ? hifi.colors.lightGrayText : hifi.colors.redHighlight; // Alignment - horizontalAlignment: Text.AlignHLeft; + horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignVCenter; } } @@ -466,11 +535,31 @@ Rectangle { id: checkoutActionButtonsContainer; // Size width: root.width; - height: 130; + height: root.alreadyOwned ? 180 : 130; // Anchors anchors.left: parent.left; anchors.bottom: parent.bottom; anchors.bottomMargin: 8; + + + // "Inventory" button + HifiControlsUit.Button { + id: goToInventoryButton; + visible: root.alreadyOwned; + color: hifi.buttons.black; + colorScheme: hifi.colorSchemes.dark; + anchors.top: parent.top; + anchors.topMargin: 3; + anchors.bottomMargin: 7; + height: 40; + anchors.left: parent.left; + anchors.leftMargin: 20; + width: parent.width - anchors.leftMargin*2; + text: "View Inventory" + onClicked: { + sendToScript({method: 'checkout_goToInventory'}); + } + } // "Cancel" button HifiControlsUit.Button { @@ -501,7 +590,7 @@ Rectangle { anchors.right: parent.right; anchors.rightMargin: 20; width: parent.width/2 - anchors.rightMargin*2; - text: (inventoryReceived && balanceReceived) ? ("Buy") : "--"; + text: (inventoryReceived && balanceReceived) ? (root.alreadyOwned ? "Buy Again" : "Buy"): "--"; onClicked: { buyButton.enabled = false; commerce.buy(itemId, itemPriceFull); @@ -510,7 +599,9 @@ Rectangle { RalewayRegular { id: buyText; - text: (balanceAfterPurchase >= 0) ? "This item will be added to your Inventory, which can be accessed from Marketplace." : "OUT OF MONEY LOL"; + text: (inventoryReceived && balanceReceived) ? ((balanceAfterPurchase < 0) ? "You do not have enough HFC to purchase this item." : + (root.alreadyOwned ? "You already own this item. If you buy it again, you'll be able to use multiple copies of it at once." : + "This item will be added to your Inventory, which can be accessed from Marketplace.")) : ""; // Text size size: 20; // Anchors @@ -752,7 +843,8 @@ Rectangle { itemNameText.text = message.params.itemName; itemAuthorText.text = message.params.itemAuthor; root.itemPriceFull = message.params.itemPrice; - itemPriceText.text = parseFloat(root.itemPriceFull/100).toFixed(2); + itemPriceText.text = (parseFloat(root.itemPriceFull/100).toFixed(2)) + " HFC"; + totalCostText.text = (parseFloat(root.itemPriceFull/100).toFixed(2)) + " HFC"; itemHref = message.params.itemHref; commerce.balance(); commerce.inventory();