realm_plan_type: Restrict uploading organization logos by plan type.

Using the page_param variable "plan_includes_wide_organization_logo"
disallow users in a realm with a "LIMITED" plan type from uploading
their own wide organization logos and instead suggest that they
upgrade their plan using the page_param variable
"upgrade_text_for_wide_organization_logo" for the suggestion message.

Backend validation for this feature already exists.

static/js/admin.js

@@ -68,6 +68,9 @@ exports.build_page = function () {
         realm_digest_emails_enabled: page_params.realm_digest_emails_enabled,
         realm_digest_weekday: page_params.realm_digest_weekday,
         development: page_params.development_environment,
+        plan_includes_wide_organization_logo: page_params.plan_includes_wide_organization_logo,
+        upgrade_text_for_wide_organization_logo:
+            page_params.upgrade_text_for_wide_organization_logo,
     };
 
     options.admin_settings_label = admin_settings_label;

static/js/settings_org.js

@@ -1156,8 +1156,10 @@ exports.build_page = function () {
         });
     }
 
+    if (page_params.plan_includes_wide_organization_logo) {
         realm_logo.build_realm_logo_widget(upload_realm_logo, false);
         realm_logo.build_realm_logo_widget(upload_realm_logo, true);
+    }
 
 
     $('#deactivate_realm_button').on('click', function (e) {

static/styles/settings.scss

@@ -114,6 +114,15 @@ label {
     margin-bottom: 10px;
 }
 
+.upgrade_realm_plan_type_suggestion {
+    font-size: 16px;
+}
+
+.upgrade_realm_plan_type_suggestion::after {
+    font-family: FontAwesome;
+    content: "\f135";
+}
+
 .user-avatar-section {
     float: right;
 }

static/templates/settings/organization-profile-admin.handlebars

@@ -56,6 +56,15 @@
                     <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                 </a>
             </h3>
+            <div>
+                {{#unless plan_includes_wide_organization_logo}}
+                <p class="upgrade_realm_plan_type_suggestion">
+                    <a href="https://zulipchat.com/plans/" target="_blank">
+                        {{upgrade_text_for_wide_organization_logo}}
+                    </a>
+                </p>
+                {{/unless}}
+            </div>
         </div>
 
         <p>{{t "A wide image for the upper left corner of the app." }}</p>
@@ -67,6 +76,7 @@
             </div>
             <div class="inline-block avatar-controls">
                 <div id="realm_logo_file_input_error" class="alert text-error"></div>
+                {{#if plan_includes_wide_organization_logo}}
                 <button class="button rounded sea-green w-200 block input-size"
                   id="realm_logo_upload_button">
                     <span id="upload_logo_button_text">{{t 'Upload new logo' }}</span>
@@ -74,6 +84,7 @@
                 </button>
                 <button class="button rounded btn-danger w-200 m-t-10 block input-size"
                   id="realm_logo_delete_button">{{t 'Delete logo' }}</button>
+                {{/if}}
             </div>
         </div>
 
@@ -86,6 +97,7 @@
             </div>
             <div class="inline-block avatar-controls">
                 <div id="realm_night_logo_file_input_error" class="alert text-error"></div>
+                {{#if plan_includes_wide_organization_logo}}
                 <button class="button rounded sea-green w-200 block input-size"
                   id="realm_night_logo_upload_button">
                     <span id="upload_night_logo_button_text">{{t 'Upload new logo' }}</span>
@@ -93,6 +105,7 @@
                 </button>
                 <button class="button rounded btn-danger w-200 m-t-10 block input-size"
                   id="realm_night_logo_delete_button">{{t 'Delete logo' }}</button>
+                {{/if}}
             </div>
         </div>