WAT-838 | Feature | Refactor business hour component adding rules

src/components/BusinessHours.vue

@@ -59,8 +59,8 @@ export default {
       default: () => ({
         switchOpen: 'Open',
         switchClosed: 'Closed',
-        placeholderOpens: 'Opens',
-        placeholderCloses: 'Closes',
+        placeholderOpens: 'Open',
+        placeholderCloses: 'Closed',
         addHours: 'Add hours',
         open: {
           invalidInput:
@@ -120,8 +120,74 @@ export default {
   },
   methods: {
     hoursChange: function(val) {
+      val = this.setClosingTimeBasedOnOpening(val)
+
       this.$emit('updated-hours', val);
-    }
+    },
+    calculateOpenTime(closeTime) {
+      const minutesPerHour = 60;
+      const additionalHours = 9;
+      const minHours = 0; // 12:00 AM is represented as 0 hours
+      const [hours, minutes] = [
+        parseInt(closeTime.substring(0, 2), 10),
+        parseInt(closeTime.substring(2, 4), 10),
+      ];
+
+      // Calculate the total minutes of the closing time
+      let totalMinutes = hours * minutesPerHour + minutes - (additionalHours * minutesPerHour);
+
+      // If the calculated open time is earlier than 12:00 AM, set it to 12:00 AM
+      if (totalMinutes < minHours * minutesPerHour) {
+        totalMinutes = minHours * minutesPerHour;
+      }
+
+      // Calculate the new hours and minutes for the open time
+      let newHours = Math.floor(totalMinutes / 60);
+      let newMinutes = totalMinutes % 60;
+
+      // Format the new open time as a string with padded zeros
+      return String(newHours).padStart(2, '0') + String(newMinutes).padStart(2, '0');
+    },
+    calculateCloseTime(openTime) {
+      const minutesPerHour = 60;
+      const additionalHours = 9;
+      const maxHours = 23;
+      const [hours, minutes] = [
+        parseInt(openTime.substring(0, 2), 10),
+        parseInt(openTime.substring(2, 4), 10),
+      ];
+
+      let totalMinutes = hours * minutesPerHour + minutes + (additionalHours * minutesPerHour);
+      const maxMinutes = maxHours * minutesPerHour + 30;
+
+      if (totalMinutes > maxMinutes) {
+        totalMinutes = maxMinutes;
+      }
+
+      let newHours = Math.floor(totalMinutes / 60);
+      let newMinutes = totalMinutes % 60;
+
+      return String(newHours).padStart(2, '0') + String(newMinutes).padStart(2, '0');
+    },
+    setClosingTimeBasedOnOpening(val) {
+      const key = Object.keys(val)[0];
+
+      val[key].forEach((day, index) => {
+        if (val.open === '' && val.isOpen) {
+          val[key][index].close = '';
+        }
+
+        if (day.isOpen && day.close !== '24hrs' && day.close !== '' && day.open === '') {
+          val[key][index].open = this.calculateOpenTime(day.close);
+        }
+
+        if (day.isOpen && day.open !== '24hrs' && day.open !== '' && day.close === '') {
+          val[key][index].close = this.calculateCloseTime(day.open);
+        }
+      });
+
+      return val;
+    },
   }
 };
 </script>

src/components/BusinessHoursSelect.vue

@@ -1,8 +1,19 @@
 <template>
-  <select :name="optionName" @change="inputEventHandler" v-model="selected">
-    <option v-show="isFirstRow(index) && onlyOneRow(hours)" value>{{
-      defaultText
-    }}</option>
+  <select :name="optionName"
+          :class="selectClass" 
+          v-model="selected" 
+          @focus="hidePlaceholder" 
+          @change="inputEventHandler" 
+          @blur="showPlaceholder">
+    <option v-show="isFirstRow(index) && onlyOneRow(hours)" 
+            value 
+            disabled 
+            selected 
+            v-if="isPlaceholderVisible"
+            class="placeholder-text"
+            >
+      {{ defaultText}}
+    </option>
     <option v-show="isFirstRow(index)" value="24hrs">{{
       localization.t24hours
     }}</option>
@@ -24,6 +35,36 @@ import { helperMixin } from '../mixins/helperMixin';
 import { formFieldMixin } from '../mixins/formFieldMixin';
 export default {
   name: 'BusinessHoursSelect',
-  mixins: [helperMixin, formFieldMixin]
+  mixins: [helperMixin, formFieldMixin],
+  data () {
+    return {
+      isPlaceholderVisible: true
+    }
+  },
+  computed: {
+    selectClass() {
+      if (this.selected === "" || this.selected === "") {
+        return "placeholder-text"; // Apply custom class
+      } else {
+        return "";
+      }
+    }
+  },
+  methods: {
+    hidePlaceholder() {
+      this.isPlaceholderVisible = false;
+    },
+    showPlaceholder() {
+      this.isPlaceholderVisible = true;
+    },
+  },
 };
 </script>
+
+<style scoped>
+
+.placeholder-text {
+  color: #878686; 
+}
+
+</style>