Merge pull request #12316 from zfox23/commerce_inspectionCertRedesign

Commerce: Inspection Certificate Redesign

interface/resources/qml/hifi/commerce/inspectionCertificate/InspectionCertificate.qml

@@ -19,21 +19,30 @@ 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 marketplaceUrl;
+    property string marketplaceUrl: "";
-    property string certificateId;
+    property string certificateId: "";
     property string itemName: "--";
     property string itemOwner: "--";
     property string itemEdition: "--";
     property string dateOfPurchase: "--";
+    property string itemCost: "--";
+    property string certTitleTextColor: hifi.colors.darkGray;
+    property string certTextColor: hifi.colors.white;
+    property string infoTextColor: hifi.colors.blueAccent;
+    // 0 means replace none
+    // 4 means replace all but "Item Edition"
+    // 5 means replace all 5 replaceable fields
+    property int certInfoReplaceMode: 5;
     property bool isLightbox: false;
     property bool isMyCert: false;
-    property bool isCertificateInvalid: false;
+    property bool useGoldCert: true;
+    property bool certificateInfoPending: true;
+    property int certificateStatus: 0;
+    property bool certificateStatusPending: true;
     // Style
     color: hifi.colors.faintGray;
     Connections {
@@ -45,71 +54,130 @@ Rectangle {
             } else {
                 root.marketplaceUrl = result.data.marketplace_item_url;
                 root.isMyCert = result.isMyCert ? result.isMyCert : false;
-                root.itemOwner = root.isCertificateInvalid ? "--" : (root.isMyCert ? Account.username :
+
-                "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022");
+                if (root.certInfoReplaceMode > 3) {
-                root.itemEdition = root.isCertificateInvalid ? "Uncertified Copy" :
+                    root.itemName = result.data.marketplace_item_name;
-                (result.data.edition_number + "/" + (result.data.limited_run === -1 ? "\u221e" : result.data.limited_run));
+                    // "\u2022" is the Unicode character 'BULLET' - it's what's used in password fields on the web, etc
-                root.dateOfPurchase = root.isCertificateInvalid ? "" : getFormattedDate(result.data.transfer_created_at * 1000);
+                    root.itemOwner = root.isMyCert ? Account.username :
-                root.itemName = result.data.marketplace_item_name;
+                    "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
+                    root.dateOfPurchase = root.isMyCert ? getFormattedDate(result.data.transfer_created_at * 1000) : "Undisclosed";
+                    root.itemCost = (root.isMyCert && result.data.cost !== undefined) ? result.data.cost : "Undisclosed";
+                }
+                if (root.certInfoReplaceMode > 4) {
+                    root.itemEdition = result.data.edition_number + "/" + (result.data.limited_run === -1 ? "\u221e" : result.data.limited_run);
+                }
+
+                if (root.certificateStatus === 4) { // CERTIFICATE_STATUS_OWNER_VERIFICATION_FAILED
+                    if (root.isMyCert) {
+                        errorText.text = "This item is an uncertified copy of an item you purchased.";
+                    } else {
+                        errorText.text = "The person who placed this item doesn't own it.";
+                    }
+                }
 
                 if (result.data.invalid_reason || result.data.transfer_status[0] === "failed") {
-                    titleBarText.text = "Invalid Certificate";
+                    root.useGoldCert = false;
-                    titleBarText.color = hifi.colors.redHighlight;
+                    root.certTitleTextColor = hifi.colors.redHighlight;
+                    root.certTextColor = hifi.colors.redHighlight;
+                    root.infoTextColor = hifi.colors.redHighlight;
+                    titleBarText.text = "Certificate\nNo Longer Valid";
                     popText.text = "";
+                    showInMarketplaceButton.visible = false;
+                    // "Edition" text previously set above in this function
+                    // "Owner" text previously set above in this function
+                    // "Purchase Date" text previously set above in this function
+                    // "Purchase Price" text previously set above in this function
                     if (result.data.invalid_reason) {
                         errorText.text = result.data.invalid_reason;
                     }
                 } else if (result.data.transfer_status[0] === "pending") {
+                    root.useGoldCert = false;
+                    root.certTitleTextColor = hifi.colors.redHighlight;
+                    root.certTextColor = hifi.colors.redHighlight;
+                    root.infoTextColor = hifi.colors.redHighlight;
                     titleBarText.text = "Certificate Pending";
+                    popText.text = "";
+                    showInMarketplaceButton.visible = true;
+                    // "Edition" text previously set above in this function
+                    // "Owner" text previously set above in this function
+                    // "Purchase Date" text previously set above in this function
+                    // "Purchase Price" text previously set above in this function
                     errorText.text = "The status of this item is still pending confirmation. If the purchase is not confirmed, " +
                     "this entity will be cleaned up by the domain.";
-                    errorText.color = hifi.colors.baseGray;
                 }
             }
+            root.certificateInfoPending = false;
         }
 
         onUpdateCertificateStatus: {
-            if (certStatus === 1) { // CERTIFICATE_STATUS_VERIFICATION_SUCCESS
+            root.certificateStatus = certStatus;
-                // NOP
+            if (root.certificateStatus === 1) { // CERTIFICATE_STATUS_VERIFICATION_SUCCESS
-            } else if (certStatus === 2) { // CERTIFICATE_STATUS_VERIFICATION_TIMEOUT
+                root.useGoldCert = true;
-                root.isCertificateInvalid = true;
+                root.certTitleTextColor = hifi.colors.darkGray;
-                errorText.text = "Verification of this certificate timed out.";
+                root.certTextColor = hifi.colors.white;
-                errorText.color = hifi.colors.redHighlight;
+                root.infoTextColor = hifi.colors.blueAccent;
-            } else if (certStatus === 3) { // CERTIFICATE_STATUS_STATIC_VERIFICATION_FAILED
+                titleBarText.text = "Certificate";
-                root.isCertificateInvalid = true;
+                popText.text = "PROOF OF PROVENANCE";
-                titleBarText.text = "Invalid Certificate";
+                showInMarketplaceButton.visible = true;
-                titleBarText.color = hifi.colors.redHighlight;
+                root.certInfoReplaceMode = 5;
-
+                // "Item Name" text will be set in "onCertificateInfoResult()"
+                // "Edition" text will be set in "onCertificateInfoResult()"
+                // "Owner" text will be set in "onCertificateInfoResult()"
+                // "Purchase Date" text will be set in "onCertificateInfoResult()"
+                // "Purchase Price" text will be set in "onCertificateInfoResult()"
+                errorText.text = "";
+            } else if (root.certificateStatus === 2) { // CERTIFICATE_STATUS_VERIFICATION_TIMEOUT
+                root.useGoldCert = false;
+                root.certTitleTextColor = hifi.colors.redHighlight;
+                root.certTextColor = hifi.colors.redHighlight;
+                root.infoTextColor = hifi.colors.redHighlight;
+                titleBarText.text = "Request Timed Out";
                 popText.text = "";
+                showInMarketplaceButton.visible = false;
+                root.certInfoReplaceMode = 0;
+                root.itemName = "";
+                root.itemEdition = "";
                 root.itemOwner = "";
-                dateOfPurchaseHeader.text = "";
                 root.dateOfPurchase = "";
-                root.itemEdition = "Uncertified Copy";
+                root.itemCost = "";
-
+                errorText.text = "Your request to inspect this item timed out. Please try again later.";
+            } else if (root.certificateStatus === 3) { // CERTIFICATE_STATUS_STATIC_VERIFICATION_FAILED
+                root.useGoldCert = false;
+                root.certTitleTextColor = hifi.colors.redHighlight;
+                root.certTextColor = hifi.colors.redHighlight;
+                root.infoTextColor = hifi.colors.redHighlight;
+                titleBarText.text = "Certificate\nNo Longer Valid";
+                popText.text = "";
+                showInMarketplaceButton.visible = true;
+                root.certInfoReplaceMode = 5;
+                // "Item Name" text will be set in "onCertificateInfoResult()"
+                // "Edition" text will be set in "onCertificateInfoResult()"
+                // "Owner" text will be set in "onCertificateInfoResult()"
+                // "Purchase Date" text will be set in "onCertificateInfoResult()"
+                // "Purchase Price" text will be set in "onCertificateInfoResult()"
                 errorText.text = "The information associated with this item has been modified and it no longer matches the original certified item.";
-                errorText.color = hifi.colors.baseGray;
+            } else if (root.certificateStatus === 4) { // CERTIFICATE_STATUS_OWNER_VERIFICATION_FAILED
-            } else if (certStatus === 4) { // CERTIFICATE_STATUS_OWNER_VERIFICATION_FAILED
+                root.useGoldCert = false;
-                root.isCertificateInvalid = true;
+                root.certTitleTextColor = hifi.colors.redHighlight;
+                root.certTextColor = hifi.colors.redHighlight;
+                root.infoTextColor = hifi.colors.redHighlight;
                 titleBarText.text = "Invalid Certificate";
-                titleBarText.color = hifi.colors.redHighlight;
-
                 popText.text = "";
-                root.itemOwner = "";
+                showInMarketplaceButton.visible = true;
-                dateOfPurchaseHeader.text = "";
+                root.certInfoReplaceMode = 4;
-                root.dateOfPurchase = "";
+                // "Item Name" text will be set in "onCertificateInfoResult()"
-                root.itemEdition = "Uncertified Copy";
+                root.itemEdition = "Uncertified Copy"
-
+                // "Owner" text will be set in "onCertificateInfoResult()"
-                errorText.text = "The avatar who rezzed this item doesn't own it.";
+                // "Purchase Date" text will be set in "onCertificateInfoResult()"
-                errorText.color = hifi.colors.baseGray;
+                // "Purchase Price" text will be set in "onCertificateInfoResult()"
+                // "Error Text" text will be set in "onCertificateInfoResult()"
             } else {
                 console.log("Unknown certificate status received from ledger signal!");
             }
-        }
+            
-    }
+            root.certificateStatusPending = false;
-
+            // We've gotten cert status - we are GO on getting the cert info
-    onCertificateIdChanged: {
+            Commerce.certificateInfo(root.certificateId);
-        if (certificateId !== "") {
-            Commerce.certificateInfo(certificateId);
         }
     }
 
@@ -122,9 +190,35 @@ Rectangle {
         hoverEnabled: true;
     }
 
-    Image {
+    Rectangle {
+        id: loadingOverlay;
+        z: 998;
+
+        visible: root.certificateInfoPending || root.certificateStatusPending;
         anchors.fill: parent;
-        source: "images/cert-bg.jpg";
+        color: Qt.rgba(0.0, 0.0, 0.0, 0.7);
+
+        // This object is always used in a popup or full-screen Wallet section.
+        // This MouseArea is used to prevent a user from being
+        //     able to click on a button/mouseArea underneath the popup/section.
+        MouseArea {
+            anchors.fill: parent;
+            propagateComposedEvents: false;
+        }
+                
+        AnimatedImage {
+            source: "../common/images/loader.gif"
+            width: 96;
+            height: width;
+            anchors.verticalCenter: parent.verticalCenter;
+            anchors.horizontalCenter: parent.horizontalCenter;
+        }
+    }
+
+    Image {
+        id: backgroundImage;
+        anchors.fill: parent;
+        source: root.useGoldCert ? "images/cert-bg-gold-split.png" : "images/nocert-bg-split.png";
     }
 
     // Title text
@@ -137,16 +231,17 @@ Rectangle {
         anchors.top: parent.top;
         anchors.topMargin: 40;
         anchors.left: parent.left;
-        anchors.leftMargin: 45;
+        anchors.leftMargin: 36;
         anchors.right: parent.right;
+        anchors.rightMargin: 8;
         height: paintedHeight;
         // Style
-        color: hifi.colors.darkGray;
+        color: root.certTitleTextColor;
+        wrapMode: Text.WordWrap;
     }
     // Title text
     RalewayRegular {
         id: popText;
-        text: "Proof of Provenance";
         // Text size
         size: 16;
         // Anchors
@@ -154,9 +249,38 @@ Rectangle {
         anchors.topMargin: 4;
         anchors.left: titleBarText.left;
         anchors.right: titleBarText.right;
-        height: paintedHeight;
+        height: text === "" ? 0 : paintedHeight;
         // Style
-        color: hifi.colors.darkGray;
+        color: root.certTitleTextColor;
+    }
+            
+    // "Close" button
+    HiFiGlyphs {
+        id: closeGlyphButton;
+        text: hifi.glyphs.close;
+        color: hifi.colors.white;
+        size: 26;
+        anchors.top: parent.top;
+        anchors.topMargin: 10;
+        anchors.right: parent.right;
+        anchors.rightMargin: 10;
+        MouseArea {
+            anchors.fill: parent;
+            hoverEnabled: true;
+            onEntered: {
+                parent.text = hifi.glyphs.closeInverted;
+            }
+            onExited: {
+                parent.text = hifi.glyphs.close;
+            }
+            onClicked: {
+                if (root.isLightbox) {
+                    root.visible = false;
+                } else {
+                    sendToScript({method: 'inspectionCertificate_closeClicked', closeGoesToPurchases: root.closeGoesToPurchases});
+                }
+            }
+        }
     }
 
     //
@@ -164,11 +288,13 @@ Rectangle {
     //
     Item {
         id: certificateContainer;
-        anchors.top: popText.bottom;
+        anchors.top: titleBarText.top;
-        anchors.topMargin: 30;
+        anchors.topMargin: 110;
-        anchors.bottom: buttonsContainer.top;
+        anchors.bottom: infoContainer.top;
         anchors.left: parent.left;
+        anchors.leftMargin: titleBarText.anchors.leftMargin;
         anchors.right: parent.right;
+        anchors.rightMargin: 24;
 
         RalewayRegular {
             id: itemNameHeader;
@@ -178,9 +304,7 @@ Rectangle {
             // Anchors
             anchors.top: parent.top;
             anchors.left: parent.left;
-            anchors.leftMargin: 45;
             anchors.right: parent.right;
-            anchors.rightMargin: 16;
             height: paintedHeight;
             // Style
             color: hifi.colors.darkGray;
@@ -197,79 +321,30 @@ Rectangle {
             anchors.right: itemNameHeader.right;
             height: paintedHeight;
             // Style
-            color: hifi.colors.white;
+            color: root.certTextColor;
             elide: Text.ElideRight;
             MouseArea {
+                enabled: showInMarketplaceButton.visible;
                 anchors.fill: parent;
                 hoverEnabled: enabled;
                 onClicked: {
                     sendToScript({method: 'inspectionCertificate_showInMarketplaceClicked', marketplaceUrl: root.marketplaceUrl});
                 }
                 onEntered: itemName.color = hifi.colors.blueHighlight;
-                onExited: itemName.color = hifi.colors.white;
+                onExited: itemName.color = root.certTextColor;
             }
         }
 
-        RalewayRegular {
-            id: ownedByHeader;
-            text: "OWNER";
-            // Text size
-            size: 16;
-            // Anchors
-            anchors.top: itemName.bottom;
-            anchors.topMargin: 28;
-            anchors.left: parent.left;
-            anchors.leftMargin: 45;
-            anchors.right: parent.right;
-            anchors.rightMargin: 16;
-            height: paintedHeight;
-            // Style
-            color: hifi.colors.darkGray;
-        }
-        RalewayRegular {
-            id: ownedBy;
-            text: root.itemOwner;
-            // Text size
-            size: 22;
-            // Anchors
-            anchors.top: ownedByHeader.bottom;
-            anchors.topMargin: 8;
-            anchors.left: ownedByHeader.left;
-            height: paintedHeight;
-            // Style
-            color: hifi.colors.white;
-            elide: Text.ElideRight;
-        }
-        AnonymousProRegular {
-            id: isMyCertText;
-            visible: root.isMyCert && !root.isCertificateInvalid;
-            text: "(Private)";
-            size: 18;
-            // Anchors
-            anchors.top: ownedBy.top;
-            anchors.topMargin: 4;
-            anchors.bottom: ownedBy.bottom;
-            anchors.left: ownedBy.right;
-            anchors.leftMargin: 6;
-            anchors.right: ownedByHeader.right;
-            // Style
-            color: hifi.colors.white;
-            elide: Text.ElideRight;
-            verticalAlignment: Text.AlignVCenter;
-        }
-
         RalewayRegular {
             id: editionHeader;
             text: "EDITION";
             // Text size
             size: 16;
             // Anchors
-            anchors.top: ownedBy.bottom;
+            anchors.top: itemName.bottom;
             anchors.topMargin: 28;
             anchors.left: parent.left;
-            anchors.leftMargin: 45;
             anchors.right: parent.right;
-            anchors.rightMargin: 16;
             height: paintedHeight;
             // Style
             color: hifi.colors.darkGray;
@@ -286,21 +361,117 @@ Rectangle {
             anchors.right: editionHeader.right;
             height: paintedHeight;
             // Style
-            color: hifi.colors.white;
+            color: root.certTextColor;
+        }
+
+        // "Show In Marketplace" button
+        HifiControlsUit.Button {
+            id: showInMarketplaceButton;
+            enabled: root.marketplaceUrl;
+            color: hifi.buttons.blue;
+            colorScheme: hifi.colorSchemes.light;
+            anchors.bottom: parent.bottom;
+            anchors.bottomMargin: 48;
+            anchors.right: parent.right;
+            width: 200;
+            height: 40;
+            text: "View In Market"
+            onClicked: {
+                sendToScript({method: 'inspectionCertificate_showInMarketplaceClicked', marketplaceUrl: root.marketplaceUrl});
+            }
+        }
+    }
+    //
+    // "CERTIFICATE" END
+    //
+
+    //
+    // "INFO CONTAINER" START
+    //
+    Item {
+        id: infoContainer;
+        anchors.bottom: parent.bottom;
+        anchors.left: parent.left;
+        anchors.leftMargin: titleBarText.anchors.leftMargin;
+        anchors.right: parent.right;
+        anchors.rightMargin: 24;
+        height: root.useGoldCert ? 220 : 372;
+
+        RalewayRegular {
+            id: errorText;
+            visible: !root.useGoldCert;
+            // Text size
+            size: 20;
+            // Anchors
+            anchors.top: parent.top;
+            anchors.topMargin: 36;
+            anchors.left: parent.left;
+            anchors.right: parent.right;
+            height: 116;
+            // Style
+            wrapMode: Text.WordWrap;
+            color: hifi.colors.baseGray;
+            verticalAlignment: Text.AlignTop;
+        }
+
+        RalewayRegular {
+            id: ownedByHeader;
+            text: "OWNER";
+            // Text size
+            size: 16;
+            // Anchors
+            anchors.top: errorText.visible ? errorText.bottom : parent.top;
+            anchors.topMargin: 28;
+            anchors.left: parent.left;
+            anchors.right: parent.right;
+            height: paintedHeight;
+            // Style
+            color: hifi.colors.darkGray;
+        }
+
+        RalewayRegular {
+            id: ownedBy;
+            text: root.itemOwner;
+            // Text size
+            size: 22;
+            // Anchors
+            anchors.top: ownedByHeader.bottom;
+            anchors.topMargin: 8;
+            anchors.left: ownedByHeader.left;
+            height: paintedHeight;
+            // Style
+            color: root.infoTextColor;
+            elide: Text.ElideRight;
+        }
+        AnonymousProRegular {
+            id: isMyCertText;
+            visible: root.isMyCert && ownedBy.text !== "--" && ownedBy.text !== "";
+            text: "(Private)";
+            size: 18;
+            // Anchors
+            anchors.top: ownedBy.top;
+            anchors.topMargin: 4;
+            anchors.bottom: ownedBy.bottom;
+            anchors.left: ownedBy.right;
+            anchors.leftMargin: 6;
+            anchors.right: ownedByHeader.right;
+            // Style
+            color: root.infoTextColor;
+            elide: Text.ElideRight;
+            verticalAlignment: Text.AlignVCenter;
         }
 
         RalewayRegular {
             id: dateOfPurchaseHeader;
-            text: "DATE OF PURCHASE";
+            text: "PURCHASE DATE";
             // Text size
             size: 16;
             // Anchors
-            anchors.top: edition.bottom;
+            anchors.top: ownedBy.bottom;
             anchors.topMargin: 28;
             anchors.left: parent.left;
-            anchors.leftMargin: 45;
+            anchors.right: parent.horizontalCenter;
-            anchors.right: parent.right;
+            anchors.rightMargin: 8;
-            anchors.rightMargin: 16;
             height: paintedHeight;
             // Style
             color: hifi.colors.darkGray;
@@ -317,73 +488,58 @@ Rectangle {
             anchors.right: dateOfPurchaseHeader.right;
             height: paintedHeight;
             // Style
-            color: hifi.colors.white;
+            color: root.infoTextColor;
         }
 
         RalewayRegular {
-            id: errorText;
+            id: priceHeader;
+            text: "PURCHASE PRICE";
             // Text size
-            size: 20;
+            size: 16;
             // Anchors
-            anchors.top: dateOfPurchase.bottom;
+            anchors.top: ownedBy.bottom;
-            anchors.topMargin: 36;
+            anchors.topMargin: 28;
-            anchors.left: dateOfPurchase.left;
+            anchors.left: parent.horizontalCenter;
-            anchors.right: dateOfPurchase.right;
-            anchors.bottom: parent.bottom;
-            // Style
-            wrapMode: Text.WordWrap;
-            color: hifi.colors.redHighlight;
-            verticalAlignment: Text.AlignTop;
-        }
-    }
-    //
-    // "CERTIFICATE" END
-    //
-
-    Item {
-        id: buttonsContainer;
-        anchors.bottom: parent.bottom;
-        anchors.bottomMargin: 30;
-        anchors.left: parent.left;
-        anchors.right: parent.right;
-        height: 50;
-        
-        // "Cancel" button
-        HifiControlsUit.Button {
-            color: hifi.buttons.noneBorderlessWhite;
-            colorScheme: hifi.colorSchemes.light;
-            anchors.top: parent.top;
-            anchors.left: parent.left;
-            anchors.leftMargin: 30;
-            width: parent.width/2 - 50;
-            height: 50;
-            text: "close";
-            onClicked: {
-                if (root.isLightbox) {
-                    root.visible = false;
-                } else {
-                    sendToScript({method: 'inspectionCertificate_closeClicked', closeGoesToPurchases: root.closeGoesToPurchases});
-                }
-            }
-        }   
-
-        // "Show In Marketplace" button
-        HifiControlsUit.Button {
-            id: showInMarketplaceButton;
-            enabled: root.marketplaceUrl;
-            color: hifi.buttons.blue;
-            colorScheme: hifi.colorSchemes.light;
-            anchors.top: parent.top;
             anchors.right: parent.right;
-            anchors.rightMargin: 30;
+            height: paintedHeight;
-            width: parent.width/2 - 50;
+            // Style
-            height: 50;
+            color: hifi.colors.darkGray;
-            text: "View In Market"
+        }
-            onClicked: {
+        HiFiGlyphs {
-                sendToScript({method: 'inspectionCertificate_showInMarketplaceClicked', marketplaceUrl: root.marketplaceUrl});
+            id: hfcGlyph;
-            }
+            visible: priceText.text !== "Undisclosed" && priceText.text !== "";
+            text: hifi.glyphs.hfc;
+            // Size
+            size: 24;
+            // Anchors
+            anchors.top: priceHeader.bottom;
+            anchors.topMargin: 8;
+            anchors.left: priceHeader.left;
+            width: visible ? paintedWidth + 6 : 0;
+            height: 40;
+            // Style
+            color: root.infoTextColor;
+            verticalAlignment: Text.AlignTop;
+            horizontalAlignment: Text.AlignLeft;
+        }
+        AnonymousProRegular {
+            id: priceText;
+            text: root.itemCost;
+            // Text size
+            size: 18;
+            // Anchors
+            anchors.top: priceHeader.bottom;
+            anchors.topMargin: 8;
+            anchors.left: hfcGlyph.right;
+            anchors.right: priceHeader.right;
+            height: paintedHeight;
+            // Style
+            color: root.infoTextColor;
         }
     }
+    //
+    // "INFO CONTAINER" END
+    //
 
     //
     // FUNCTION DEFINITIONS START
@@ -404,19 +560,11 @@ Rectangle {
     function fromScript(message) {
         switch (message.method) {
             case 'inspectionCertificate_setCertificateId':
+                resetCert(false);
                 root.certificateId = message.certificateId;
             break;
             case 'inspectionCertificate_resetCert':
-                titleBarText.text = "Certificate";
+                resetCert(true);
-                popText.text = "PROOF OF PURCHASE";
-                root.certificateId = "";
-                root.itemName = "--";
-                root.itemOwner = "--";
-                root.itemEdition = "--";
-                root.dateOfPurchase = "--";
-                root.marketplaceUrl = "";
-                root.isMyCert = false;
-                errorText.text = "";
             break;
             default:
                 console.log('Unrecognized message from marketplaces.js:', JSON.stringify(message));
@@ -424,7 +572,33 @@ Rectangle {
     }
     signal sendToScript(var message);
 
+    function resetCert(alsoResetCertID) {
+        if (alsoResetCertID) {
+            root.certificateId = "";
+        }
+        root.certInfoReplaceMode = 5;
+        root.certificateInfoPending = true;
+        root.certificateStatusPending = true;
+        root.useGoldCert = true;
+        root.certTitleTextColor = hifi.colors.darkGray;
+        root.certTextColor = hifi.colors.white;
+        root.infoTextColor = hifi.colors.blueAccent;
+        titleBarText.text = "Certificate";
+        popText.text = "";
+        root.itemName = "--";
+        root.itemOwner = "--";
+        root.itemEdition = "--";
+        root.dateOfPurchase = "--";
+        root.marketplaceUrl = "";
+        root.itemCost = "--";
+        root.isMyCert = false;
+        errorText.text = "";
+    }
+
     function getFormattedDate(timestamp) {
+        if (timestamp === "--") {
+            return "--";
+        }
         function addLeadingZero(n) {
             return n < 10 ? '0' + n : '' + n;
         }
@@ -449,7 +623,7 @@ Rectangle {
 
         var min = addLeadingZero(a.getMinutes());
         var sec = addLeadingZero(a.getSeconds());
-        return year + '-' + month + '-' + day + '<br>' + drawnHour + ':' + min + amOrPm;
+        return year + '-' + month + '-' + day + ' ' + drawnHour + ':' + min + amOrPm;
     }
     //
     // FUNCTION DEFINITIONS END

interface/resources/qml/hifi/commerce/wallet/sendMoney/SendMoney.qml

@@ -1115,7 +1115,7 @@ Item {
                 
         AnimatedImage {
             id: sendingMoneyImage;
-            source: "./images/loader.gif"
+            source: "../../common/images/loader.gif"
             width: 96;
             height: width;
             anchors.verticalCenter: parent.verticalCenter;