Thinking about the user journey, make tags visible at a certain point

UI/Base/VariableUIElement.ts

@@ -15,5 +15,5 @@ export class VariableUiElement extends UIElement {
     InnerRender(): string {
         return this._html.data;
     }
-    
+
 }

UI/CustomThemeGenerator/ThemeGenerator.ts

@@ -18,6 +18,7 @@ import {Tag} from "../../Logic/TagsFilter";
 import {DropDown} from "../Input/DropDown";
 import {TagRendering} from "../../Customizations/TagRendering";
 import {LayerDefinition} from "../../Customizations/LayerDefinition";
+import {State} from "../../State";
 
 
 TagRendering.injectFunction();
@@ -620,8 +621,8 @@ export class ThemeGenerator extends UIElement {
         if (!this.userDetails.data.loggedIn) {
             return new Combine(["Not logged in. You need to be logged in to create a theme.", this.loginButton]).Render();
         }
-        if (this.userDetails.data.csCount < 500) {
-            return "You need at least 500 changesets to create your own theme.";
+        if (this.userDetails.data.csCount < State.userJourney.themeGeneratorUnlock        ) {
+            return `You need at least ${State.userJourney.themeGeneratorUnlock} changesets to create your own theme.`;
         }
 
 

UI/FeatureInfoBox.ts

@@ -98,7 +98,7 @@ export class FeatureInfoBox extends UIElement {
                 info.push(infobox);
             } else if (infobox.IsQuestioning()) {
                 questions.push(infobox);
-            } else if(infobox.IsSkipped()){
+            } else if (infobox.IsSkipped()) {
                 // This question is neither known nor questioning -> it was skipped
                 skippedQuestions++;
             }
@@ -107,7 +107,19 @@ export class FeatureInfoBox extends UIElement {
 
         let questionsHtml = "";
 
-        if (State.state.osmConnection.userDetails.data.loggedIn && questions.length > 0) {
+        if (!State.state.osmConnection.userDetails.data.loggedIn) {
+            let mostImportantQuestion;
+            let score = -1000;
+            for (const question of questions) {
+
+                if (mostImportantQuestion === undefined || question.Priority() > score) {
+                    mostImportantQuestion = question;
+                    score = question.Priority();
+                }
+            }
+
+            questionsHtml = mostImportantQuestion.Render();
+        } else if (questions.length > 0) {
             // We select the most important question and render that one
             let mostImportantQuestion;
             let score = -1000;

UI/MoreScreen.ts

@@ -2,11 +2,6 @@ import {UIElement} from "./UIElement";
 import {VerticalCombine} from "./Base/VerticalCombine";
 import Translations from "./i18n/Translations";
 import {AllKnownLayouts} from "../Customizations/AllKnownLayouts";
-import {FixedUiElement} from "./Base/FixedUiElement";
-import {Utils} from "../Utils";
-import {link} from "fs";
-import {UIEventSource} from "./UIEventSource";
-import {VariableUiElement} from "./Base/VariableUIElement";
 import Combine from "./Base/Combine";
 import {SubtleButton} from "./Base/SubtleButton";
 import {State} from "../State";
@@ -21,6 +16,7 @@ export class MoreScreen extends UIElement {
     }
 
     InnerRender(): string {
+        
         const tr = Translations.t.general.morescreen;
 
         const els: UIElement[] = []
@@ -36,7 +32,8 @@ export class MoreScreen extends UIElement {
                 if (!State.state.osmConnection.userDetails.data.loggedIn) {
                     continue;
                 }
-                if (State.state.osmConnection.userDetails.data.csCount < 50) {
+                if (State.state.osmConnection.userDetails.data.csCount < 
+                    State.userJourney.customLayoutUnlock) {
                     continue;
                 }
             }

UI/SimpleAddUI.ts

@@ -9,6 +9,7 @@ import {State} from "../State";
 
 import {UIEventSource} from "../Logic/UIEventSource";
 import {UserDetails} from "../Logic/Osm/OsmConnection";
+import {FixedUiElement} from "./Base/FixedUiElement";
 
 /**
  * Asks to add a feature at the last clicked location, at least if zoom is sufficient
@@ -58,18 +59,26 @@ export class SimpleAddUI extends UIElement {
                     } else {
                         icon = preset.icon;
                     }
-                }else{
-                    console.warn("No icon defined for preset ", preset, "in layer ",layer.layerDef.id)
+                } else {
+                    console.warn("No icon defined for preset ", preset, "in layer ", layer.layerDef.id)
                 }
 
-                const button =
+                const csCount = State.state.osmConnection.userDetails.data.csCount;
+                let tagInfo = "";
+                if (csCount > State.userJourney.tagsVisibleAt) {
+                    tagInfo = preset.tags.map(t => t.asHumanString(false)).join("&");
+                    tagInfo = `<br/><span class='subtle'>${tagInfo}</span>`
+                }
+                const button: UIElement =
                     new SubtleButton(
                         icon,
                         new Combine([
                             "<b>",
                             preset.title,
-                            "</b><br/>",
-                            preset.description !== undefined ? preset.description : ""])
+                            "</b>",
+                            preset.description !== undefined ? new Combine(["<br/>", preset.description]) : "",
+                            tagInfo
+                        ])
                     ).onClick(
                         () => {
                             self.confirmButton = new SubtleButton(icon,
@@ -87,10 +96,12 @@ export class SimpleAddUI extends UIElement {
                                 icon: icon
                             });
                         }
-                )
+                    )
+
+                
 
 
-            this._addButtons.push(button);
+                this._addButtons.push(button);
             }
         }
         
@@ -120,15 +131,23 @@ export class SimpleAddUI extends UIElement {
         if (this._confirmPreset.data !== undefined) {
 
             if(userDetails.data.dryRun){
-                this.CreatePoint(this._confirmPreset.data.tags, this._confirmPreset.data.layerToAddTo)();
-                return "";
+              //  this.CreatePoint(this._confirmPreset.data.tags, this._confirmPreset.data.layerToAddTo)();
+              //  return "";
             }
 
+            let tagInfo = "";
+            const csCount = State.state.osmConnection.userDetails.data.csCount;
+            if (csCount > State.userJourney.tagsVisibleAt) {
+                tagInfo = this._confirmPreset.data .tags.map(t => t.asHumanString(csCount > State.userJourney.tagsVisibleAndWikiLinked)).join("&");
+                tagInfo = `<br/>More information about the preset: ${tagInfo}`
+            }
+            
             return new Combine([
                 Translations.t.general.add.confirmIntro.Subs({title: this._confirmPreset.data.name}),
                 userDetails.data.dryRun ? "<span class='alert'>TESTING - changes won't be saved</span>":"",
                 this.confirmButton,
-                this.cancelButton
+                this.cancelButton,
+                tagInfo
 
             ]).Render();
 

UI/UIElement.ts

@@ -140,7 +140,12 @@ export abstract class UIElement extends UIEventSource<string>{
     public IsEmpty(): boolean {
         return this.InnerRender() === "";
     }
-    
+
+    public SetClass(clss: string): UIElement {
+        this.clss = clss;
+        return this;
+    }
+
 }
 
 

UI/i18n/Translations.ts

@@ -673,6 +673,10 @@ export default class Translations {
                 nl: "Je bent aangemeld. Welkom terug!",
                 fr: "Vous êtes connecté, bienvenue"
             }),
+            loginToStart: new T({
+                en: "Login to answer this question",
+                nl: "Meld je aan om deze vraag te beantwoorden"
+            }),
             search: {
                 search: new Translation({
                     en: "Search a location",