Use variable for maximum tag length in view and templates.

Author: jjeffryes

js/languages/en-US.json

@@ -94,7 +94,7 @@
   "CategoryPlaceholder": "Enter category",
   "CategoryHelperText": "Categories are used to group and organize listing within your store.",
   "KeywordsPlaceholder": "Enter One or More Tags",
-  "KeywordsHelperText": "Adding tags helps your listing to be discovered in the market. You can only have one of each tag, and a maximum of 10 tags, separated by commas or the enter key.",
+  "KeywordsHelperText": "Adding tags helps your listing to be discovered in the market. You can only have one of each tag, and a maximum of 10 tags, separated by commas or the enter key. Tags cannot be longer than %{maxTagChars} characters.",
   "ExpirationDateHelperText": "Set a date for the listing to automatically be pulled from your store.",
   "ClearExpirationDate": "Clear Expiration Date",
   "ClearShippingLocations": "Clear All",
@@ -529,7 +529,7 @@
     "badSMTPAuthentication": "The username/password combination used failed.",
     "goodSMTPAuthentication": "You have successfully connected to the SMTP server.",
     "tagIsTooLongHeadline": "The tag is too long",
-    "tagIsTooLongBody": "Tags cannot be more than 40 characters long."
+    "tagIsTooLongBody": "Tags cannot be more than %{maxTagChars} characters long."
   },
   "pageConnectingMessages": {
     "listingConnect": "Connecting to listing ${listing}",

js/templates/itemEdit.html

@@ -413,7 +413,8 @@ <h5><%= polyglot.t('Discover') %></h5>
             </div>
           </div>
           <div class="flexRow">
-            <p class="textOpacity50 helper-text marginTop8"><%= polyglot.t('KeywordsHelperText') %></p>
+            <p class="textOpacity50 helper-text marginTop8"><%= polyglot.t('KeywordsHelperText',
+              {maxTagChars: ob.maxTagChars}) %></p>
           </div>
         </div>
 

js/views/itemEditVw.js

@@ -71,6 +71,8 @@ module.exports = baseVw.extend({
 
     self.model.set('expTime', self.model.get('vendor_offer').listing.metadata.expiry.replace(" UTC", ""));
 
+    this.maxTagChars = 40;
+
     this.listenTo(this.model, 'change:priceSet', this.render());
   },
 
@@ -80,7 +82,8 @@ module.exports = baseVw.extend({
     loadTemplate('./js/templates/itemEdit.html', function(loadedTemplate) {
       var context = __.extend({}, self.model.toJSON(), {
         MAX_PHOTOS: self.MAX_PHOTOS,
-        images: self.imgHashes.map((hash) => self.getImageUrl(hash))
+        images: self.imgHashes.map((hash) => self.getImageUrl(hash)),
+        maxTagChars: self.maxTagChars
       });
 
       self.$el.html(loadedTemplate(context));
@@ -211,10 +214,10 @@ module.exports = baseVw.extend({
         saveOnBlur: true,
         placeholder: window.polyglot.t('KeywordsPlaceholder'),
         onBeforeTagAdd: (event, tag) => {
-          if(tag.length > 40) {
+          if(tag.length > self.maxTagChars) {
             app.simpleMessageModal.open({
               title: window.polyglot.t('errorMessages.tagIsTooLongHeadline'),
-              message: window.polyglot.t('errorMessages.tagIsTooLongBody')
+              message: window.polyglot.t('errorMessages.tagIsTooLongBody', {maxTagChars: self.maxTagChars})
             });
             return false;
           }