FIX: render category badge styles inline for email (#25487)

lib/category_badge.rb

@@ -2,50 +2,95 @@
 
 module CategoryBadge
   def self.html_for(category, opts = nil)
-    opts = opts || {}
+    opts ||= {}
 
-    # If there is no category, bail
-    return "" if category.blank?
+    # Bail if there is no category, hide uncategorized by default
+    return "" if category.blank? || (category.uncategorized? && !opts[:show_uncategorized])
 
-    # By default hide uncategorized
-    return "" if category.uncategorized? && !opts[:show_uncategorized]
+    if opts[:inline_style]
+      # Inline styles for email
+      style_for_email(category, opts)
+    else
+      # Browser styles
+      style_for_browser(category, opts)
+    end
+  end
 
-    extra_classes = "#{opts[:extra_classes]}"
+  def self.shared_data(category, opts)
+    {
+      parent_category: fetch_parent_category(category),
+      category_url:
+        opts[:absolute_url] ? "#{Discourse.base_url_no_prefix}#{category.url}" : category.url,
+      extra_classes: opts[:extra_classes].to_s,
+    }
+  end
 
-    result = +""
+  def self.fetch_parent_category(category)
+    Category.find_by(id: category.parent_category_id) if category.parent_category_id
+  end
 
-    # parent class
-    parent_category =
-      Category.find_by(id: category.parent_category_id) unless category.parent_category_id.nil?
-    has_parent_class = parent_category ? "--has-parent" : ""
+  def self.map_styles_to_string(styles)
+    styles.map { |k, v| "#{k}: #{ERB::Util.html_escape(v)};" }.join(" ")
+  end
 
-    # category name
-    class_names = "badge-category #{has_parent_class}"
+  def self.wrap_in_link(content, url, extra_classes = "", style_value = nil)
+    style_attr = style_value ? " style='#{style_value}'" : ""
+    "<a class='badge-category__wrapper #{extra_classes}' href='#{url}'#{style_attr}>#{content}</a>".html_safe
+  end
+
+  def self.style_for_browser(category, opts)
+    data = shared_data(category, opts)
+
+    class_names = "badge-category #{data[:parent_category] ? "--has-parent" : ""}"
     description = category.description_text ? "title='#{category.description_text}'" : ""
-    category_url =
-      opts[:absolute_url] ? "#{Discourse.base_url_no_prefix}#{category.url}" : category.url
 
-    # styles
-    styles = {
+    badge_styles = {
       "--category-badge-color": "##{category.color}",
       "--category-badge-text-color": "##{category.text_color}",
     }
-    styles["--parent-category-badge-color"] = "##{parent_category.color}" if parent_category
-    style_value = styles.map { |k, v| "#{k}: #{ERB::Util.html_escape(v)};" }.join(" ")
+    badge_styles["--parent-category-badge-color"] = "##{data[:parent_category].color}" if data[
+      :parent_category
+    ]
 
-    # category badge structure
+    result = +""
     result << "<span data-category-id='#{category.id}'"
-    result << " style='#{style_value}'"
-    result << " data-parent-category-id='#{parent_category.id}'" if parent_category
+    result << " style='#{map_styles_to_string(badge_styles)}'"
+    result << " data-parent-category-id='#{data[:parent_category].id}'" if data[:parent_category]
     result << " data-drop-close='true' class='#{class_names}' #{description}>"
     result << "<span class='badge-category__name'>"
     result << ERB::Util.html_escape(category.name)
     result << "</span></span>"
 
-    # wrapping link
-    result =
-      "<a class='badge-category__wrapper #{extra_classes}' href='#{category_url}'>#{result}</a>"
+    wrap_in_link(result, data[:category_url], data[:extra_classes])
+  end
 
-    result.html_safe
+  def self.style_for_email(category, opts)
+    data = shared_data(category, opts)
+
+    badge_styles = {
+      display: "inline-block",
+      width: "0.72em",
+      height: "0.72em",
+      "margin-right": "0.33em",
+      "background-color": "##{category.color}",
+    }
+
+    result = +""
+    result << "<span data-category-id='#{category.id}'"
+    result << " data-parent-category-id='#{data[:parent_category].id}'" if data[:parent_category]
+    result << " data-drop-close='true'>"
+    result << "<span>"
+    result << "<span style='#{map_styles_to_string(badge_styles)}'>"
+    if data[:parent_category]
+      parent_badge_styles = { display: "block", width: "0.36em", height: "0.72em" }
+      parent_badge_styles["background-color"] = "##{data[:parent_category].color}"
+      parent_badge_style_value = map_styles_to_string(parent_badge_styles)
+      result << "<span style='#{parent_badge_style_value}'></span>"
+    end
+    result << "</span>"
+    result << ERB::Util.html_escape(category.name)
+    result << "</span></span>"
+
+    wrap_in_link(result, data[:category_url], "", "color: ##{category.text_color};")
   end
 end

spec/lib/category_badge_spec.rb

@@ -10,7 +10,7 @@ RSpec.describe CategoryBadge do
 
     expect(html).not_to include("<b>title</b>")
     expect(html).not_to include("<b>name</b>")
-    expect(html).to include(ERB::Util.html_escape("<b>name</b>"))
+    expect(html).to include("&lt;b&gt;name&lt;/b&gt;")
     expect(html).to include("title='title'")
   end
 
@@ -32,4 +32,13 @@ RSpec.describe CategoryBadge do
       },
     )
   end
+
+  it "includes inline color style when inline_style is true" do
+    c = Fabricate(:category, color: "123456", text_color: "654321")
+
+    html = CategoryBadge.html_for(c, inline_style: true)
+
+    expect(html).to include("color: #654321;")
+    expect(html).to include("background-color: #123456;")
+  end
 end