fix: TimeZone issues on Wizard (#3611)

* Fixing TimeZone issues on Wizard

* Test fixing

* Test fixing

* Test fixing

* Fixing Date and TimeZone Issues in Events

* Fixing Date and TimeZone Issues in Events

* Updating date format and fixing tests

Author: kushthedude

app/controllers/admin/events/list.js

@@ -35,22 +35,18 @@ export default class extends Controller.extend(EmberTableControllerMixin) {
          valuePath       : 'startsAt',
          isSortable      : true,
          headerComponent : 'tables/headers/sort',
+         extraValuePaths : ['timezone'],
          cellComponent   : 'ui-table/cell/cell-simple-date',
-         width           : 65,
-         options         : {
-           dateFormat: 'MMMM DD, YYYY - hh:mm A'
-         }
+         width           : 75
        },
        {
          name            : 'Ends At',
          valuePath       : 'endsAt',
          isSortable      : true,
+         extraValuePaths : ['timezone'],
          headerComponent : 'tables/headers/sort',
          cellComponent   : 'ui-table/cell/cell-simple-date',
-         width           : 65,
-         options         : {
-           dateFormat: 'MMMM DD, YYYY - hh:mm A'
-         }
+         width           : 75
        },
        {
          name            : 'State',

app/controllers/events/list.js

@@ -27,8 +27,9 @@ export default class extends Controller.extend(EmberTableControllerMixin) {
       {
         name            : 'Date',
         valuePath       : 'startsAt',
-        extraValuePaths : ['endsAt'],
+        extraValuePaths : ['endsAt', 'timezone'],
         isSortable      : true,
+        width           : 180,
         headerComponent : 'tables/headers/sort',
         cellComponent   : 'ui-table/cell/cell-event-date'
 

app/helpers/general-date.js

@@ -0,0 +1,9 @@
+import Helper from '@ember/component/helper';
+import moment from 'moment';
+
+export function generalDate(params) {
+  let timezone = params[1] ? params[1] : moment.tz.guess();
+  return `${moment(params[0]).tz(timezone).format('h:mm A , MMMM Do YYYY')} (${moment.tz(params[0], timezone).zoneAbbr()})`;
+}
+
+export default Helper.helper(generalDate);

app/helpers/header-date.js

@@ -6,4 +6,4 @@ export function headerDate(params) {
   return `${moment(params[0]).tz(timezone).format('dddd, MMMM Do YYYY, h:mm A')} (${moment.tz(params[0], timezone).zoneAbbr()})`;
 }
 
-export default Helper.helper(headerDate);
+export default Helper.helper(headerDate);

app/templates/components/event-card.hbs

@@ -20,7 +20,7 @@
       {{/smart-overflow}}
       <div class="meta">
         <span class="date">
-          {{moment-format event.startsAt 'ddd, MMM DD h:mm A'}}
+          {{general-date event.startsAt event.timezone}}
         </span>
       </div>
       {{#smart-overflow class='description'}}

app/templates/components/events/view/overview/general-info.hbs

@@ -36,11 +36,11 @@
       </tr>
       <tr>
         <td><strong>{{t 'Start time'}}</strong></td>
-        <td>{{moment-format data.event.startsAt 'h:mm A, MMMM Do YYYY'}}</td>
+        <td>{{general-date data.event.startsAt data.event.timezone}}</td>
       </tr>
       <tr>
         <td><strong>{{t 'End time'}}</strong></td>
-        <td>{{moment-format data.event.endsAt 'h:mm A, MMMM Do YYYY'}}</td>
+        <td>{{general-date data.event.endsAt data.event.timezone}}</td>
       </tr>
       <tr>
         <td><strong>{{t 'Session types'}}</strong></td>

app/templates/components/ui-table/cell/cell-event-date.hbs

@@ -1,11 +1,11 @@
 {{#if record}}
   {{#if extraRecords.endsAt}}
     <div>
-      {{moment-format record 'MMMM DD, YYYY - hh:mm A'}}
+      {{general-date record extraRecords.timezone}}
     </div>
     (to)
     <div>
-      {{moment-format extraRecords.endsAt 'MMMM DD, YYYY - hh:mm A'}}
+      {{general-date extraRecords.endsAt extraRecords.timezone}}
     </div>
   {{else}}
     <span>

app/templates/components/ui-table/cell/cell-simple-date.hbs

@@ -1,9 +1,9 @@
-{{#if record}}
+{{#if extraRecords.timezone}}
   <span>
-    {{moment-format record (if props.options.dateFormat props.options.dateFormat 'MMMM DD, YYYY - HH:mm A')}}
+    {{general-date record extraRecords.timezone}}
   </span>
-{{else}}
+{{else if record}}
   <span>
-    {{t 'No dates available.'}}
+    {{moment-format record (if props.options.dateFormat props.options.dateFormat 'MMMM DD, YYYY - HH:mm A')}}
   </span>
 {{/if}}

tests/integration/helpers/general-date-test.js

@@ -0,0 +1,16 @@
+import { module, test } from 'qunit';
+import { setupIntegrationTest } from 'open-event-frontend/tests/helpers/setup-integration-test';
+import hbs from 'htmlbars-inline-precompile';
+import { render } from '@ember/test-helpers';
+import moment from 'moment';
+
+module('Integration | Helper | general date', function(hooks) {
+  setupIntegrationTest(hooks);
+
+  test('it renders', async function(assert) {
+    this.set('inputMomentValue', moment('2019-05-01T03:30:00+09:00'));
+    this.set('inputTimezoneValue', 'Japan');
+    await render(hbs`{{general-date inputMomentValue inputTimezoneValue}}`);
+    assert.equal(this.element.innerHTML.trim(), '3:30 AM , May 1st 2019 (JST)');
+  });
+});

tests/integration/helpers/header-date-test.js

@@ -8,7 +8,7 @@ module('Integration | Helper | header date', function(hooks) {
   setupIntegrationTest(hooks);
 
   test('it renders', async function(assert) {
-    this.set('inputMomentValue', moment('2019-04-30T18:30:00+00:00'));
+    this.set('inputMomentValue', moment('2019-05-01T03:30:00+09:00'));
     this.set('inputTimezoneValue', 'Japan');
     await render(hbs`{{header-date inputMomentValue inputTimezoneValue}}`);
     assert.equal(this.element.innerHTML.trim(), 'Wednesday, May 1st 2019, 3:30 AM (JST)');