feat: Consider business hours while generating the reports (#4330)

* feat: Consider business hours while generating the reports

app/javascript/dashboard/api/reports.js

@@ -8,7 +8,15 @@ class ReportsAPI extends ApiClient {
     super('reports', { accountScoped: true, apiVersion: 'v2' });
   }
 
-  getReports(metric, since, until, type = 'account', id, group_by) {
+  getReports(
+    metric,
+    since,
+    until,
+    type = 'account',
+    id,
+    group_by,
+    business_hours
+  ) {
     return axios.get(`${this.url}`, {
       params: {
         metric,
@@ -17,12 +25,13 @@ class ReportsAPI extends ApiClient {
         type,
         id,
         group_by,
+        business_hours,
         timezone_offset: getTimeOffset(),
       },
     });
   }
 
-  getSummary(since, until, type = 'account', id, group_by) {
+  getSummary(since, until, type = 'account', id, group_by, business_hours) {
     return axios.get(`${this.url}/summary`, {
       params: {
         since,
@@ -30,6 +39,7 @@ class ReportsAPI extends ApiClient {
         type,
         id,
         group_by,
+        business_hours,
       },
     });
   }

app/javascript/dashboard/assets/scss/widgets/_report.scss

@@ -78,5 +78,10 @@
       font-size: $font-size-default;
       color: $color-gray;
     }
+
+    .business-hours {
+      margin: $space-normal;
+      text-align: center;
+    }
   }
 }

app/javascript/dashboard/assets/scss/widgets/_reports.scss

@@ -25,3 +25,21 @@
   align-items: center;
   display: flex;
 }
+
+.business-hours {
+  align-items: center;
+  display: flex;
+  justify-content: end;
+  margin-bottom: var(--space-normal);
+  margin-left: auto;
+  padding-right: var(--space-normal);
+}
+
+.business-hours-text {
+  font-size: var(--font-size-small);
+}
+
+.switch {
+  margin-bottom: var(--space-zero);
+  margin-left: var(--space-small);
+}

app/javascript/dashboard/i18n/locale/en/report.json

@@ -78,7 +78,8 @@
       { "id": 2, "groupBy": "Week" },
       { "id": 3, "groupBy": "Month" },
       { "id": 4, "groupBy": "Year" }
-    ]
+    ],
+    "BUSINESS_HOURS": "Business Hours"
   },
   "AGENT_REPORTS": {
     "HEADER": "Agents Overview",

app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue

@@ -15,6 +15,7 @@
       :filter-items-list="filterItemsList"
       @date-range-change="onDateRangeChange"
       @filter-change="onFilterChange"
+      @business-hours-toggle="onBusinessHoursToggle"
     />
     <div class="row">
       <woot-report-stats-card
@@ -79,6 +80,7 @@ export default {
       groupBy: GROUP_BY_FILTER[1],
       filterItemsList: this.$t('REPORT.GROUP_BY_DAY_OPTIONS'),
       selectedGroupByFilter: {},
+      businessHours: false,
     };
   },
   computed: {
@@ -166,21 +168,23 @@ export default {
   },
   methods: {
     fetchAllData() {
-      const { from, to, groupBy } = this;
+      const { from, to, groupBy, businessHours } = this;
       this.$store.dispatch('fetchAccountSummary', {
         from,
         to,
         groupBy: groupBy.period,
+        businessHours,
       });
       this.fetchChartData();
     },
     fetchChartData() {
-      const { from, to, groupBy } = this;
+      const { from, to, groupBy, businessHours } = this;
       this.$store.dispatch('fetchAccountReport', {
         metric: this.metrics[this.currentSelection].KEY,
         from,
         to,
         groupBy: groupBy.period,
+        businessHours,
       });
     },
     downloadAgentReports() {
@@ -226,6 +230,10 @@ export default {
           return this.$t('REPORT.GROUP_BY_DAY_OPTIONS');
       }
     },
+    onBusinessHoursToggle(value) {
+      this.businessHours = value;
+      this.fetchAllData();
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue

@@ -61,6 +61,12 @@
         @input="handleAgentsFilterSelection"
       />
     </div>
+    <div class="small-12 medium-3 business-hours">
+      <span class="business-hours-text">{{ $t('REPORT.BUSINESS_HOURS') }}</span>
+      <span>
+        <woot-switch v-model="businessHoursSelected" />
+      </span>
+    </div>
   </div>
 </template>
 <script>
@@ -105,6 +111,7 @@ export default {
       customDateRange: [new Date(), new Date()],
       currentSelectedFilter: null,
       selectedAgents: [],
+      businessHoursSelected: false,
     };
   },
   computed: {
@@ -153,6 +160,9 @@ export default {
     filterItemsList() {
       this.currentSelectedFilter = this.selectedGroupByFilter;
     },
+    businessHoursSelected() {
+      this.$emit('business-hours-toggle', this.businessHoursSelected);
+    },
   },
   mounted() {
     this.onDateRangeChange();

app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue

@@ -145,6 +145,12 @@
         @input="changeGroupByFilterSelection"
       />
     </div>
+    <div class="small-12 medium-3 business-hours">
+      <span class="business-hours-text">{{ $t('REPORT.BUSINESS_HOURS') }}</span>
+      <span>
+        <woot-switch v-model="businessHoursSelected" />
+      </span>
+    </div>
   </div>
 </template>
 <script>
@@ -188,6 +194,7 @@ export default {
       dateRange: this.$t('REPORT.DATE_RANGE'),
       customDateRange: [new Date(), new Date()],
       currentSelectedGroupByFilter: null,
+      businessHoursSelected: false,
     };
   },
   computed: {
@@ -249,6 +256,9 @@ export default {
     groupByFilterItemsList() {
       this.currentSelectedGroupByFilter = this.selectedGroupByFilter;
     },
+    businessHoursSelected() {
+      this.$emit('business-hours-toggle', this.businessHoursSelected);
+    },
   },
   mounted() {
     this.onDateRangeChange();

app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue

@@ -17,6 +17,7 @@
       @date-range-change="onDateRangeChange"
       @filter-change="onFilterChange"
       @group-by-filter-change="onGroupByFilterChange"
+      @business-hours-toggle="onBusinessHoursToggle"
     />
     <div>
       <div v-if="filterItemsList.length" class="row">
@@ -100,6 +101,7 @@ export default {
       groupBy: GROUP_BY_FILTER[1],
       groupByfilterItemsList: this.$t('REPORT.GROUP_BY_DAY_OPTIONS'),
       selectedGroupByFilter: null,
+      businessHours: false,
     };
   },
   computed: {
@@ -202,19 +204,20 @@ export default {
   methods: {
     fetchAllData() {
       if (this.selectedFilter) {
-        const { from, to, groupBy } = this;
+        const { from, to, groupBy, businessHours } = this;
         this.$store.dispatch('fetchAccountSummary', {
           from,
           to,
           type: this.type,
           id: this.selectedFilter.id,
           groupBy: groupBy.period,
+          businessHours,
         });
         this.fetchChartData();
       }
     },
     fetchChartData() {
-      const { from, to, groupBy } = this;
+      const { from, to, groupBy, businessHours } = this;
       this.$store.dispatch('fetchAccountReport', {
         metric: this.metrics[this.currentSelection].KEY,
         from,
@@ -222,6 +225,7 @@ export default {
         type: this.type,
         id: this.selectedFilter.id,
         groupBy: groupBy.period,
+        businessHours,
       });
     },
     downloadReports() {
@@ -288,6 +292,10 @@ export default {
           return this.$t('REPORT.GROUP_BY_DAY_OPTIONS');
       }
     },
+    onBusinessHoursToggle(value) {
+      this.businessHours = value;
+      this.fetchAllData();
+    },
   },
 };
 </script>

app/javascript/dashboard/store/modules/reports.js

@@ -42,7 +42,8 @@ export const actions = {
       reportObj.to,
       reportObj.type,
       reportObj.id,
-      reportObj.groupBy
+      reportObj.groupBy,
+      reportObj.businessHours
     ).then(accountReport => {
       let { data } = accountReport;
       data = data.filter(
@@ -69,7 +70,8 @@ export const actions = {
       reportObj.to,
       reportObj.type,
       reportObj.id,
-      reportObj.groupBy
+      reportObj.groupBy,
+      reportObj.businessHours
     )
       .then(accountSummary => {
         commit(types.default.SET_ACCOUNT_SUMMARY, accountSummary.data);