Initial progress

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

@@ -49,6 +49,7 @@ Rectangle {
     property bool canRezCertifiedItems: Entities.canRezCertified() || Entities.canRezTmpCertified();
     property string referrer;
     property bool isInstalled;
+    property bool isUpdating;
     // Style
     color: hifi.colors.white;
     Connections {
@@ -413,6 +414,7 @@ Rectangle {
                 // "HFC" balance label
                 HiFiGlyphs {
                     id: itemPriceTextLabel;
+                    visible: !root.isUpdating;
                     text: hifi.glyphs.hfc;
                     // Size
                     size: 30;
@@ -428,7 +430,7 @@ Rectangle {
                 }
                 FiraSansSemiBold {
                     id: itemPriceText;
-                    text: (root.itemPrice === -1) ? "--" : root.itemPrice;
+                    text: root.isUpdating ? "FREE\nUPGRADE" : ((root.itemPrice === -1) ? "--" : root.itemPrice);
                     // Text size
                     size: 26;
                     // Anchors
@@ -549,8 +551,8 @@ Rectangle {
                 height: 50;
                 anchors.left: parent.left;
                 anchors.right: parent.right;
-                text: ((root.isCertified) ? ((ownershipStatusReceived && balanceReceived) ?
-                    (viewInMyPurchasesButton.visible ? "Buy It Again" : "Confirm Purchase") : "--") : "Get Item");
+                text: root.isUpdating ? "CONFIRM UPDATE" : (((root.isCertified) ? ((ownershipStatusReceived && balanceReceived) ?
+                    (viewInMyPurchasesButton.visible ? "Buy It Again" : "Confirm Purchase") : "--") : "Get Item"));
                 onClicked: {
                     if (root.isCertified) {
                         if (!root.shouldBuyWithControlledFailure) {
@@ -1002,6 +1004,7 @@ Rectangle {
     function fromScript(message) {
         switch (message.method) {
             case 'updateCheckoutQML':
+                root.isUpdating = message.params.isUpdating;
                 itemId = message.params.itemId;
                 itemName = message.params.itemName;
                 root.itemPrice = message.params.itemPrice;
@@ -1019,7 +1022,7 @@ Rectangle {
     function refreshBuyUI() {
         if (root.isCertified) {
             if (root.ownershipStatusReceived && root.balanceReceived) {
-                if (root.balanceAfterPurchase < 0) {
+                if (root.balanceAfterPurchase < 0 && !root.isUpdating) {
                     if (root.alreadyOwned) {
                         buyText.text = "<b>Your Wallet does not have sufficient funds to purchase this item again.</b>";
                         viewInMyPurchasesButton.visible = true;
@@ -1031,13 +1034,19 @@ Rectangle {
                     buyGlyph.text = hifi.glyphs.alert;
                     buyGlyph.size = 54;
                 } else {
-                    if (root.alreadyOwned) {
+                    if (root.alreadyOwned && !root.isUpdating) {
                         viewInMyPurchasesButton.visible = true;
                     } else {
                         buyText.text = "";
                     }
 
-                    if (root.itemType === "contentSet" && !Entities.canReplaceContent()) {
+                    if (root.isUpdating) {
+                        buyText.text = "By agreeing to update, you agree to trade in your old item for the update that replaces it.";
+                        buyTextContainer.color = "#FFC3CD";
+                        buyTextContainer.border.color = "#F3808F";
+                        buyGlyph.text = hifi.glyphs.alert;
+                        buyGlyph.size = 54;
+                    } else if (root.itemType === "contentSet" && !Entities.canReplaceContent()) {
                         buyText.text = "The domain owner must enable 'Replace Content' permissions for you in this " +
                             "<b>domain's server settings</b> before you can replace this domain's content with <b>" + root.itemName + "</b>";
                         buyTextContainer.color = "#FFC3CD";

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

@@ -398,6 +398,8 @@ Rectangle {
                 displayedItemCount: model.displayedItemCount;
                 permissionExplanationCardVisible: model.permissionExplanationCardVisible;
                 isInstalled: model.isInstalled;
+                upgradeUrl: model.upgrade_url;
+                upgradeTitle: model.upgrade_title;
                 itemType: {
                     if (model.root_file_url.indexOf(".fst") > -1) {
                         "avatar";
@@ -485,6 +487,8 @@ Rectangle {
                                     filteredPurchasesModel.setProperty(i, "permissionExplanationCardVisible", true);
                                 }
                             }
+                        } else if (msg.method === "updateItemClicked") {
+                            sendToScript(msg);
                         }
                     }
                 }

scripts/system/html/js/marketplacesInject.js

@@ -246,6 +246,7 @@
     function buyButtonClicked(id, name, author, price, href, referrer) {
         EventBridge.emitWebEvent(JSON.stringify({
             type: "CHECKOUT",
+            isUpdating: false,
             itemId: id,
             itemName: name,
             itemPrice: price ? parseInt(price, 10) : 0,
@@ -255,6 +256,29 @@
         }));
     }
 
+    function updateButtonClicked(id, name, author, href, referrer) {
+        EventBridge.emitWebEvent(JSON.stringify({
+            type: "UPDATE",
+            isUpdating: true,
+            itemId: id,
+            itemName: name,
+            itemHref: href,
+            referrer: referrer,
+            itemAuthor: author
+        }));
+    }
+
+    // From https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
+    function getParameterByName(name, url) {
+        if (!url) url = window.location.href;
+        name = name.replace(/[\[\]]/g, "\\$&");
+        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+            results = regex.exec(url);
+        if (!results) return null;
+        if (!results[2]) return '';
+        return decodeURIComponent(results[2].replace(/\+/g, " "));
+    }
+
     function injectBuyButtonOnMainPage() {
         var cost;
 
@@ -412,13 +436,25 @@
                 var cost = $('.item-cost').text();
                 if (availability !== 'available') {
                     purchaseButton.html('UNAVAILABLE (' + availability + ')');
+                } else if (url.indexOf('edition=' != -1)) {
+                    purchaseButton.html('UPDATE FOR FREE');
                 } else if (parseInt(cost) > 0 && $('#side-info').find('#buyItemButton').size() === 0) {
                     purchaseButton.html('PURCHASE <span class="hifi-glyph hifi-glyph-hfc" style="filter:invert(1);background-size:20px;' +
                         'width:20px;height:20px;position:relative;top:5px;"></span> ' + cost);
                 }
 
                 purchaseButton.on('click', function () {
-                    if ('available' === availability) {
+                    if (url.indexOf('edition=' != -1)) {
+                        if (url.indexOf('upgradeUrl=' === -1)) {
+                            console.log("ERROR! Item is an upgrade, but no upgradeUrl was specified.");
+                        } else {
+                            updateButtonClicked(window.location.pathname.split("/")[3],
+                                $('#top-center').find('h1').text(),
+                                $('#creator').find('.value').text(),
+                                getParameterByName('upgradeUrl'),
+                                "itemPage");
+                        }
+                    } else if ('available' === availability) {
                         buyButtonClicked(window.location.pathname.split("/")[3],
                             $('#top-center').find('h1').text(),
                             $('#creator').find('.value').text(),

scripts/system/marketplaces/marketplaces.js

@@ -417,7 +417,7 @@ var selectionDisplay = null; // for gridTool.js to ignore
             isDownloadBeingCancelled = false;
         } else {
             var parsedJsonMessage = JSON.parse(message);
-            if (parsedJsonMessage.type === "CHECKOUT") {
+            if (parsedJsonMessage.type === "CHECKOUT" || parsedJsonMessage.type === "UPDATE") {
                 wireEventBridge(true);
                 tablet.pushOntoStack(MARKETPLACE_CHECKOUT_QML_PATH);
                 tablet.sendToQml({
@@ -560,6 +560,10 @@ var selectionDisplay = null; // for gridTool.js to ignore
             case 'purchases_goToMarketplaceClicked':
                 tablet.gotoWebScreen(MARKETPLACE_URL_INITIAL, MARKETPLACES_INJECT_SCRIPT_URL);
                 break;
+            case 'updateItemClicked':
+                tablet.gotoWebScreen(MARKETPLACE_URL + '/items/' + message.itemId + "?edition=" + message.itemEdition + "&upgradeUrl=" + message.upgradeUrl,
+                    MARKETPLACES_INJECT_SCRIPT_URL);
+                break;
             case 'passphrasePopup_cancelClicked':
             case 'needsLogIn_cancelClicked':
                 tablet.gotoWebScreen(MARKETPLACE_URL_INITIAL, MARKETPLACES_INJECT_SCRIPT_URL);