UX: improves dates display in emails (#6805)

plugins/discourse-local-dates/assets/javascripts/lib/discourse-markdown/discourse-local-dates.js.es6

@@ -104,17 +104,12 @@ function addLocalDate(buffer, matches, state) {
 
   buffer.push(token);
 
-  let emailPreview;
-  const emailTimezone = (config.timezones || "Etc/UTC").split("|")[0];
-  const formattedDateTime = dateTime.tz(emailTimezone).format(config.format);
-  const formattedTimezone = emailTimezone.replace("/", ": ").replace("_", " ");
-
-  if (formattedDateTime.match(/TZ/)) {
-    emailPreview = formattedDateTime.replace("TZ", formattedTimezone);
-  } else {
-    emailPreview = `${formattedDateTime} (${formattedTimezone})`;
-  }
-  token.attrs.push(["data-email-preview", emailPreview]);
+  const formattedDateTime = dateTime
+    .tz("Etc/UTC")
+    .format(
+      state.md.options.discourse.datesEmailFormat || moment.defaultFormat
+    );
+  token.attrs.push(["data-email-preview", `${formattedDateTime} UTC`]);
 
   closeBuffer(buffer, state, dateTime.utc().format(config.format));
 }
@@ -139,6 +134,8 @@ export function setup(helper) {
   ]);
 
   helper.registerOptions((opts, siteSettings) => {
+    opts.datesEmailFormat = siteSettings.discourse_local_dates_email_format;
+
     opts.features[
       "discourse-local-dates"
     ] = !!siteSettings.discourse_local_dates_enabled;

plugins/discourse-local-dates/config/locales/server.en.yml

@@ -3,3 +3,4 @@ en:
     discourse_local_dates_enabled: "Enable the discourse-local-dates feature. This will add support to local timezone aware dates in posts using the [date] element."
     discourse_local_dates_default_formats: "Frequently used date time formats, see: <a target='_blank' rel='noopener' href='https://momentjs.com/docs/#/parsing/string-format/'>momentjs string format</a>"
     discourse_local_dates_default_timezones: "Default list of timezones, must be a valid <a target='_blank' rel='noopener' href='https://en.wikipedia.org/wiki/List_of_tz_database_time_zones'>TZ</a>"
+    discourse_local_dates_email_format: "Format used to display a date in emails."

plugins/discourse-local-dates/config/settings.yml

@@ -1,4 +1,7 @@
 plugins:
+  discourse_local_dates_email_format:
+    default: "YYYY-MM-DDTHH:mm:ss[Z]"
+    client: true
   discourse_local_dates_enabled:
     default: true
     client: true

plugins/discourse-local-dates/spec/integration/local_dates_spec.rb

@@ -21,7 +21,7 @@ RSpec.describe "Local Dates" do
       'data-timezones="Europe/Paris|America/Los_Angeles"'
     )
 
-    expect(cooked).to include('data-email-preview="05/09/2018 12:00:00 AM (Europe: Paris)"')
+    expect(cooked).to include('data-email-preview="2018-05-08T22:00:00Z UTC"')
     expect(cooked).to include('05/08/2018 10:00:00 PM')
   end
 

plugins/discourse-local-dates/spec/lib/pretty_text_spec.rb

@@ -5,6 +5,8 @@ def generate_html(text, opts = {})
   output += " data-date=\"#{opts[:date]}\"" if opts[:date]
   output += " data-time=\"#{opts[:time]}\"" if opts[:time]
   output += " class=\"discourse-local-date\""
+  output += " data-timezones=\"#{opts[:timezones]}\"" if opts[:timezones]
+  output += " data-timezone=\"#{opts[:timezone]}\"" if opts[:timezone]
   output += " data-format=\"#{opts[:format]}\"" if opts[:format]
   output += " data-email-preview=\"#{opts[:email_preview]}\"" if opts[:email_preview]
   output += ">"
@@ -20,20 +22,9 @@ describe PrettyText do
   context 'emails simplified rendering' do
     it 'works with default markup' do
       cooked = PrettyText.cook("[date=2018-05-08]")
-      cooked_mail = generate_html("2018-05-08T00:00:00Z (Etc: UTC)",
+      cooked_mail = generate_html("2018-05-08T00:00:00Z UTC",
         date: "2018-05-08",
-        email_preview: "2018-05-08T00:00:00Z (Etc: UTC)"
-      )
-
-      expect(PrettyText.format_for_email(cooked)).to match_html(cooked_mail)
-    end
-
-    it 'works with format' do
-      cooked = PrettyText.cook("[date=2018-05-08  format=LLLL]")
-      cooked_mail = generate_html("Tuesday, May 8, 2018 12:00 AM (Etc: UTC)",
-        date: "2018-05-08",
-        email_preview: "Tuesday, May 8, 2018 12:00 AM (Etc: UTC)",
-        format: "LLLL"
+        email_preview: "2018-05-08T00:00:00Z UTC"
       )
 
       expect(PrettyText.format_for_email(cooked)).to match_html(cooked_mail)
@@ -41,13 +32,41 @@ describe PrettyText do
 
     it 'works with time' do
       cooked = PrettyText.cook("[date=2018-05-08  time=20:00:00]")
-      cooked_mail = generate_html("2018-05-08T20:00:00Z (Etc: UTC)",
+      cooked_mail = generate_html("2018-05-08T20:00:00Z UTC",
         date: "2018-05-08",
-        email_preview: "2018-05-08T20:00:00Z (Etc: UTC)",
+        email_preview: "2018-05-08T20:00:00Z UTC",
         time: "20:00:00"
       )
 
       expect(PrettyText.format_for_email(cooked)).to match_html(cooked_mail)
     end
+
+    it 'works with multiple timezones' do
+      cooked = PrettyText.cook('[date=2018-05-08 timezone="Europe/Paris" timezones="America/Los_Angeles|Pacific/Auckland"]')
+      cooked_mail = generate_html("2018-05-07T22:00:00Z UTC",
+        date: "2018-05-08",
+        email_preview: "2018-05-07T22:00:00Z UTC",
+        timezone: "Europe/Paris",
+        timezones: "America/Los_Angeles|Pacific/Auckland"
+      )
+
+      expect(PrettyText.format_for_email(cooked)).to match_html(cooked_mail)
+    end
+
+    describe 'discourse_local_dates_email_format' do
+      before do
+        SiteSetting.discourse_local_dates_email_format = "DD/MM"
+      end
+
+      it 'uses the site setting' do
+        cooked = PrettyText.cook("[date=2018-05-08]")
+        cooked_mail = generate_html("08/05 UTC",
+          date: "2018-05-08",
+          email_preview: "08/05 UTC"
+        )
+
+        expect(PrettyText.format_for_email(cooked)).to match_html(cooked_mail)
+      end
+    end
   end
 end