feat: Settings screen for custom branding (#8543)

- Ability to configure Chatwoot custom branding from UI when using paid plans

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

app/controllers/super_admin/app_configs_controller.rb

@@ -1,21 +1,38 @@
 class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
+  before_action :set_config
+  before_action :allowed_configs
   def show
-    @allowed_configs = %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET]
     # ref: https://github.com/rubocop/rubocop/issues/7767
     # rubocop:disable Style/HashTransformValues
-    @fb_config = InstallationConfig.where(name: @allowed_configs)
-                                   .pluck(:name, :serialized_value)
-                                   .map { |name, serialized_value| [name, serialized_value['value']] }
-                                   .to_h
+    @app_config = InstallationConfig.where(name: @allowed_configs)
+                                    .pluck(:name, :serialized_value)
+                                    .map { |name, serialized_value| [name, serialized_value['value']] }
+                                    .to_h
     # rubocop:enable Style/HashTransformValues
   end
 
   def create
     params['app_config'].each do |key, value|
+      next unless @allowed_configs.include?(key)
+
       i = InstallationConfig.where(name: key).first_or_create(value: value, locked: false)
       i.value = value
       i.save!
     end
-    redirect_to super_admin_app_config_url
+    # rubocop:disable Rails/I18nLocaleTexts
+    redirect_to super_admin_settings_path, notice: 'App Configs updated successfully'
+    # rubocop:enable Rails/I18nLocaleTexts
+  end
+
+  private
+
+  def set_config
+    @config = params[:config]
+  end
+
+  def allowed_configs
+    @allowed_configs = %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET]
   end
 end
+
+SuperAdmin::AppConfigsController.prepend_mod_with('SuperAdmin::AppConfigsController')

app/views/super_admin/app_configs/show.html.erb

@@ -1,20 +1,20 @@
 <% content_for(:title) do %>
-  App Config
+  Configure Settings
 <% end %>
 <header class="main-content__header" role="banner">
   <h1 class="main-content__page-title" id="page-title">
     <%= content_for(:title) %>
   </h1>
 </header>
 <section class="main-content__body">
-  <%= form_with url: super_admin_app_config_url , method: :post do |form| %>
+  <%= form_with url: super_admin_app_config_url(config: @config) , method: :post do |form| %>
     <% @allowed_configs.each do |c| %>
       <div class="field-unit">
         <div class="field-unit__label">
           <%= form.label "app_config[#{c}]", c %>
         </div>
         <div class="field-unit__field">
-          <%= form.text_field "app_config[#{c}]", value: @fb_config[c] %>
+          <%= form.text_field "app_config[#{c}]", value: @app_config[c] %>
         </div>
       </div>
     <% end %>

app/views/super_admin/application/_icons.html.erb

@@ -135,4 +135,8 @@
   <symbol id="eye-hide" viewBox="0 0 24 24">
     <path d="M2.22 2.22a.75.75 0 0 0-.073.976l.073.084 4.034 4.035a9.986 9.986 0 0 0-3.955 5.75.75.75 0 0 0 1.455.364 8.49 8.49 0 0 1 3.58-5.034l1.81 1.81A4 4 0 0 0 14.8 15.86l5.919 5.92a.75.75 0 0 0 1.133-.977l-.073-.084-6.113-6.114.001-.002-1.2-1.198-2.87-2.87h.002L8.719 7.658l.001-.002-1.133-1.13L3.28 2.22a.75.75 0 0 0-1.06 0Zm7.984 9.045 3.535 3.536a2.5 2.5 0 0 1-3.535-3.535ZM12 5.5c-1 0-1.97.148-2.889.425l1.237 1.236a8.503 8.503 0 0 1 9.899 6.272.75.75 0 0 0 1.455-.363A10.003 10.003 0 0 0 12 5.5Zm.195 3.51 3.801 3.8a4.003 4.003 0 0 0-3.801-3.8Z" />
   </symbol>
+
+  <symbol id="icon-gear" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.50498 13.75C3.18794 13.2017 2.94148 12.6156 2.77148 12.0055C3.14146 11.8173 3.45218 11.5305 3.66926 11.1767C3.88633 10.8229 4.00131 10.4159 4.00146 10.0008C4.00162 9.58574 3.88695 9.1787 3.67014 8.82474C3.45332 8.47078 3.14282 8.18369 2.77298 7.99524C3.11201 6.76935 3.75753 5.64995 4.64873 4.74249C4.9968 4.96878 5.4007 5.09436 5.81572 5.10532C6.23074 5.11629 6.6407 5.01221 7.00023 4.80461C7.35976 4.59701 7.65485 4.29399 7.85283 3.92907C8.05081 3.56415 8.14396 3.15157 8.12198 2.73699C9.35357 2.41871 10.6459 2.41922 11.8772 2.73849C11.8554 3.15306 11.9488 3.56558 12.1469 3.9304C12.3451 4.29521 12.6403 4.59809 12.9999 4.80553C13.3595 5.01297 13.7694 5.11688 14.1844 5.10575C14.5994 5.09463 15.0033 4.9689 15.3512 4.74249C15.7855 5.18499 16.171 5.68824 16.495 6.24999C16.8197 6.81174 17.0627 7.39749 17.2285 7.99449C16.8585 8.18267 16.5478 8.46952 16.3307 8.82332C16.1136 9.17712 15.9987 9.58407 15.9985 9.99915C15.9984 10.4142 16.113 10.8213 16.3298 11.1752C16.5466 11.5292 16.8571 11.8163 17.227 12.0047C16.888 13.2306 16.2424 14.35 15.3512 15.2575C15.0032 15.0312 14.5993 14.9056 14.1843 14.8947C13.7692 14.8837 13.3593 14.9878 12.9997 15.1954C12.6402 15.403 12.3451 15.706 12.1471 16.0709C11.9492 16.4358 11.856 16.8484 11.878 17.263C10.6464 17.5813 9.35406 17.5808 8.12273 17.2615C8.14452 16.8469 8.05118 16.4344 7.85305 16.0696C7.65492 15.7048 7.35972 15.4019 7.00011 15.1944C6.64051 14.987 6.23053 14.8831 5.81553 14.8942C5.40053 14.9054 4.99671 15.0311 4.64873 15.2575C4.20548 14.8052 3.82118 14.2987 3.50498 13.75V13.75ZM7.74998 13.897C8.5492 14.358 9.15012 15.0978 9.43748 15.9745C9.81173 16.0097 10.1875 16.0105 10.5617 15.9752C10.8493 15.0984 11.4505 14.3586 12.25 13.8977C13.0489 13.4355 13.9904 13.2846 14.8937 13.474C15.1112 13.168 15.2987 12.8417 15.4547 12.5005C14.8393 11.8131 14.4993 10.9226 14.5 9.99999C14.5 9.05499 14.8525 8.17224 15.4547 7.49949C15.2976 7.15835 15.1093 6.83246 14.8922 6.52599C13.9894 6.71522 13.0486 6.5646 12.25 6.10299C11.4508 5.64202 10.8499 4.90223 10.5625 4.02549C10.1882 3.99024 9.81248 3.98949 9.43823 4.02474C9.15068 4.9016 8.54949 5.64141 7.74998 6.10224C6.95107 6.56448 6.00959 6.71538 5.10623 6.52599C4.88916 6.8322 4.70133 7.15814 4.54523 7.49949C5.16066 8.18691 5.50065 9.07733 5.49998 9.99999C5.49998 10.945 5.14748 11.8277 4.54523 12.5005C4.70234 12.8416 4.89064 13.1675 5.10773 13.474C6.01052 13.2848 6.95139 13.4354 7.74998 13.897ZM9.99998 12.25C9.40325 12.25 8.83095 12.0129 8.40899 11.591C7.98704 11.169 7.74998 10.5967 7.74998 9.99999C7.74998 9.40325 7.98704 8.83096 8.40899 8.409C8.83095 7.98704 9.40325 7.74999 9.99998 7.74999C10.5967 7.74999 11.169 7.98704 11.591 8.409C12.0129 8.83096 12.25 9.40325 12.25 9.99999C12.25 10.5967 12.0129 11.169 11.591 11.591C11.169 12.0129 10.5967 12.25 9.99998 12.25ZM9.99998 10.75C10.1989 10.75 10.3897 10.671 10.5303 10.5303C10.671 10.3897 10.75 10.1989 10.75 9.99999C10.75 9.80108 10.671 9.61031 10.5303 9.46966C10.3897 9.32901 10.1989 9.24999 9.99998 9.24999C9.80107 9.24999 9.61031 9.32901 9.46965 9.46966C9.329 9.61031 9.24998 9.80108 9.24998 9.99999C9.24998 10.1989 9.329 10.3897 9.46965 10.5303C9.61031 10.671 9.80107 10.75 9.99998 10.75V10.75Z" fill="#868C98"/>
+  </symbol>
 </svg>

app/views/super_admin/settings/show.html.erb

@@ -79,7 +79,17 @@
           </div>
           <% end %>
           <div class="flex items-center justify-between mb-1.5 mt-4">
-            <h3 class="text-slate-900 font-medium"><%= attrs[:name] %></h3>
+            <div class="flex items-center gap-2">
+              <h3 class="text-slate-900 font-medium"><%= attrs[:name] %></h3> 
+              <% if attrs[:enterprise] %>
+                <span class="px-2 h-4 leading-4 rounded-xl text-green-800 font-medium bg-green-100/70 text-xxs">EE</span>  
+              <% end %>
+              <% if attrs[:config_key].present? && attrs[:enabled] %>
+                <a class="inline-flex items-center justify-center h-5 w-5 hover:bg-slate-50 rounded-sm" href="/super_admin/app_config?config=<%= attrs[:config_key] %>">
+                  <svg width="18" height="18"><use xlink:href="#icon-gear" /></svg>
+                </a>
+              <% end %>
+            </div>
           </div>
           <p class="text-slate-600 mb-0"><%= attrs[:description] %></p>
         </div>

enterprise/app/controllers/enterprise/super_admin/app_configs_controller.rb

@@ -0,0 +1,23 @@
+module Enterprise::SuperAdmin::AppConfigsController
+  private
+
+  def allowed_configs
+    return super if ChatwootHub.pricing_plan == 'community'
+
+    case @config
+    when 'custom_branding'
+      @allowed_configs = %w[
+        LOGO_THUMBNAIL
+        LOGO
+        BRAND_NAME
+        INSTALLATION_NAME
+        BRAND_URL
+        WIDGET_BRAND_URL
+        TERMS_URL
+        PRIVACY_URL
+      ]
+    else
+      super
+    end
+  end
+end

enterprise/app/helpers/super_admin/features.yml

@@ -3,21 +3,26 @@ custom_branding:
   description: 'Apply your own branding to this installation.'
   enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
   icon: 'icon-paint-brush-line'
+  config_key: 'custom_branding'
+  enterprise: true
 agent_capacity:
   name: 'Agent Capacity'
   description: 'Set limits to auto-assigning conversations to your agents.'
   enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
   icon: 'icon-hourglass-line'
+  enterprise: true
 audit_logs:
   name: 'Audit Logs'
   description: 'Track and trace account activities with ease with detailed audit logs.'
   enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
   icon: 'icon-menu-search-line'
+  enterprise: true
 disable_branding:
   name: 'Disable Branding'
   description: 'Disable branding on live-chat widget and external emails.'
   enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
   icon: 'icon-sailbot-fill'
+  enterprise: true
 live_chat:
   name: 'Live Chat'
   description: 'Improve your customer experience using a live chat on your website.'
@@ -33,6 +38,7 @@ messenger:
   description: 'Stay connected with your customers on Facebook & Instagram.'
   enabled: true
   icon: 'icon-messenger-line'
+  config_key: 'facebook'
 whatsapp:
   name: 'WhatsApp'
   description: 'Manage your WhatsApp business interactions from Chatwoot.'

spec/controllers/super_admin/app_config_controller_spec.rb

@@ -34,13 +34,13 @@
     context 'when it is an aunthenticated super admin' do
       it 'shows the app_config page' do
         sign_in(super_admin, scope: :super_admin)
-        post '/super_admin/app_config', params: { app_config: { TESTKEY: 'TESTVALUE' } }
+        post '/super_admin/app_config', params: { app_config: { FB_APP_ID: 'FB_APP_ID' } }
 
         expect(response).to have_http_status(:found)
-        expect(response).to redirect_to(super_admin_app_config_path)
+        expect(response).to redirect_to(super_admin_settings_path)
 
-        config = GlobalConfig.get('TESTKEY')
-        expect(config['TESTKEY']).to eq('TESTVALUE')
+        config = GlobalConfig.get('FB_APP_ID')
+        expect(config['FB_APP_ID']).to eq('FB_APP_ID')
       end
     end
   end