Fix: add option to choose 24 hour working slot (#4018)

* Add option to choose 24 hour working slot

* fix spec

* add check to update open hour and close hour for open all day

* update 24 hour working slot change in widget side

* add validation to check open_all_day and closed_all_day true at the same time

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

@@ -463,7 +463,8 @@
         "HOURS": "hours",
         "VALIDATION_ERROR": "Starting time should be before closing time.",
         "CHOOSE": "Choose"
-      }
+      },
+      "ALL_DAY":"All-Day"
     },
     "IMAP": {
       "TITLE": "IMAP",

app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue

@@ -4,7 +4,7 @@
       <input
         v-model="isDayEnabled"
         name="enable-day"
-        class="enable-day"
+        class="enable-checkbox"
         type="checkbox"
         :title="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.ENABLE')"
       />
@@ -14,26 +14,38 @@
     </div>
     <div v-if="isDayEnabled" class="hours-select-wrap">
       <div class="hours-range">
+        <div class="checkbox-wrap open-all-day">
+          <input
+            v-model="isOpenAllDay"
+            name="enable-open-all-day"
+            class="enable-checkbox"
+            type="checkbox"
+            :title="$t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY')"
+          />
+          <span>{{ $t('INBOX_MGMT.BUSINESS_HOURS.ALL_DAY') }}</span>
+        </div>
         <multiselect
           v-model="fromTime"
-          :options="timeSlots"
+          :options="fromTimeSlots"
           deselect-label=""
           select-label=""
           selected-label=""
           :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
           :allow-empty="false"
+          :disabled="isOpenAllDay"
         />
         <div class="separator-icon">
           <fluent-icon icon="subtract" type="solid" size="16" />
         </div>
         <multiselect
           v-model="toTime"
-          :options="timeSlots"
+          :options="toTimeSlots"
           deselect-label=""
           select-label=""
           selected-label=""
           :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
           :allow-empty="false"
+          :disabled="isOpenAllDay"
         />
       </div>
       <div v-if="hasError" class="date-error">
@@ -79,9 +91,14 @@ export default {
     },
   },
   computed: {
-    timeSlots() {
+    fromTimeSlots() {
       return timeSlots;
     },
+    toTimeSlots() {
+      return timeSlots.filter(slot => {
+        return slot !== '12:00 AM';
+      });
+    },
     isDayEnabled: {
       get() {
         return this.timeSlot.from && this.timeSlot.to;
@@ -93,12 +110,14 @@ export default {
               from: timeSlots[0],
               to: timeSlots[16],
               valid: true,
+              openAllDay: false,
             }
           : {
               ...this.timeSlot,
               from: '',
               to: '',
               valid: false,
+              openAllDay: false,
             };
         this.$emit('update', newSlot);
       },
@@ -146,15 +165,39 @@ export default {
       return parse(this.toTime, 'hh:mm a', new Date());
     },
     totalHours() {
-      const totalHours = differenceInMinutes(this.toDate, this.fromDate) / 60;
-      if (this.toTime === '12:00 AM') {
-        return 24 + totalHours;
+      if (this.timeSlot.openAllDay) {
+        return 24;
       }
+      const totalHours = differenceInMinutes(this.toDate, this.fromDate) / 60;
       return totalHours;
     },
     hasError() {
       return !this.timeSlot.valid;
     },
+    isOpenAllDay: {
+      get() {
+        return this.timeSlot.openAllDay;
+      },
+      set(value) {
+        if (value) {
+          this.$emit('update', {
+            ...this.timeSlot,
+            from: '12:00 AM',
+            to: '11:59 PM',
+            valid: true,
+            openAllDay: value,
+          });
+        } else {
+          this.$emit('update', {
+            ...this.timeSlot,
+            from: '09:00 AM',
+            to: '05:00 PM',
+            valid: true,
+            openAllDay: value,
+          });
+        }
+      },
+    },
   },
 };
 </script>
@@ -182,7 +225,7 @@ export default {
   box-sizing: content-box;
   border-bottom: 1px solid var(--color-border-light);
 }
-.enable-day {
+.enable-checkbox {
   margin: 0;
 }
 
@@ -240,4 +283,17 @@ export default {
   font-size: var(--font-size-mini);
   color: var(--r-300);
 }
+
+.open-all-day {
+  margin-right: var(--space-medium);
+  span {
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+    margin-left: var(--space-smaller);
+  }
+  input {
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+  }
+}
 </style>

app/javascript/dashboard/routes/dashboard/settings/inbox/helpers/businessHour.js

@@ -86,6 +86,7 @@ export const timeSlotParse = timeSlots => {
       close_hour: closeHour,
       close_minutes: closeMinutes,
       closed_all_day: closedAllDay,
+      open_all_day: openAllDay,
     } = slot;
     const from = closedAllDay ? '' : getTime(openHour, openMinutes);
     const to = closedAllDay ? '' : getTime(closeHour, closeMinutes);
@@ -95,13 +96,15 @@ export const timeSlotParse = timeSlots => {
       to,
       from,
       valid: !closedAllDay,
+      openAllDay,
     };
   });
 };
 
 export const timeSlotTransform = timeSlots => {
   return timeSlots.map(slot => {
-    const closed = !(slot.to && slot.from);
+    const closed = slot.openAllDay ? false : !(slot.to && slot.from);
+    const openAllDay = slot.openAllDay;
     let fromDate = '';
     let toDate = '';
     let openHour = '';
@@ -125,6 +128,7 @@ export const timeSlotTransform = timeSlots => {
       open_minutes: openMinutes,
       close_hour: closeHour,
       close_minutes: closeMinutes,
+      open_all_day: openAllDay,
     };
   });
 };

app/javascript/dashboard/routes/dashboard/settings/inbox/helpers/specs/businessHour.spec.js

@@ -40,6 +40,7 @@ describe('#timeSlotParse', () => {
       close_hour: 4,
       close_minutes: 30,
       closed_all_day: false,
+      open_all_day: false,
     };
 
     expect(timeSlotParse([slot])).toStrictEqual([
@@ -48,6 +49,7 @@ describe('#timeSlotParse', () => {
         from: '01:30 AM',
         to: '04:30 AM',
         valid: true,
+        openAllDay: false,
       },
     ]);
   });
@@ -60,6 +62,7 @@ describe('#timeSlotTransform', () => {
       from: '01:30 AM',
       to: '04:30 AM',
       valid: true,
+      openAllDay: false,
     };
 
     expect(timeSlotTransform([slot])).toStrictEqual([
@@ -70,6 +73,7 @@ describe('#timeSlotTransform', () => {
         close_hour: 4,
         close_minutes: 30,
         closed_all_day: false,
+        open_all_day: false,
       },
     ]);
   });

app/javascript/widget/mixins/availability.js

@@ -31,9 +31,12 @@ export default {
         closeHour,
         closeMinute,
         closedAllDay,
+        openAllDay,
       } = this.currentDayAvailability;
       const { utcOffset } = this.channelConfig;
 
+      if (openAllDay) return true;
+
       if (closedAllDay) return false;
 
       const startTime = buildDateFromTime(openHour, openMinute, utcOffset);
@@ -56,6 +59,7 @@ export default {
         openMinute: workingHourConfig.open_minutes,
         closeHour: workingHourConfig.close_hour,
         closeMinute: workingHourConfig.close_minutes,
+        openAllDay: workingHourConfig.open_all_day,
       };
     },
     isInBusinessHours() {