From 71aef006087cb53b0d1ea1fbd521fb6446231ace Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Mon, 4 Dec 2023 18:38:34 +0530
Subject: [PATCH 1/5] Improved: code for time modal in customScheduleModal
 (#44)

---
 src/components/CustomScheduleModal.vue | 81 ++++++++++++++++----------
 1 file changed, 50 insertions(+), 31 deletions(-)

diff --git a/src/components/CustomScheduleModal.vue b/src/components/CustomScheduleModal.vue
index 4ddfc5aa..f85574e9 100644
--- a/src/components/CustomScheduleModal.vue
+++ b/src/components/CustomScheduleModal.vue
@@ -27,17 +27,15 @@
         <ion-label>
           <p>{{ translate(day.charAt(0).toUpperCase() + day.slice(1)) }}</p>
         </ion-label>
-        <ion-datetime-button :datetime="day+'StartTime'">
-          <ion-label :slot="selectedTimesForWeek[day+'StartTime'] ? '' : 'time-target'">
-            <p>{{ translate("Start Time") }}</p>
-          </ion-label>
-        </ion-datetime-button>
+        <ion-chip color="medium" @click="openTimeModal(day+'StartTime', selectedTimesForWeek[day+'StartTime'])">
+          {{ selectedTimesForWeek[day+'StartTime'] ? getTime(selectedTimesForWeek[day+'StartTime']) : 'Start Time' }}
+          <ion-icon v-if="selectedTimesForWeek[day+'StartTime']" :icon="closeCircle" @click="clearSelectedTime(day+'StartTime')" @click.stop />
+        </ion-chip>
         -
-        <ion-datetime-button :datetime="day+'EndTime'">
-          <ion-label :slot="selectedTimesForWeek[day+'EndTime'] ? '' : 'time-target'">
-            <p>{{ translate("End Time") }}</p>
-          </ion-label>
-        </ion-datetime-button>
+        <ion-chip color="medium" @click="openTimeModal(day+'EndTime', selectedTimesForWeek[day+'EndTime'])">
+          {{ selectedTimesForWeek[day+'EndTime'] ? getTime(selectedTimesForWeek[day+'EndTime']) : 'End Time' }}
+          <ion-icon v-if="selectedTimesForWeek[day+'EndTime']" :icon="closeCircle" @click="clearSelectedTime(day+'StartTime')" @click.stop />
+        </ion-chip>
       </ion-item>
     </ion-list>
 
@@ -46,27 +44,29 @@
         <ion-label>
           <p>{{ translate("Open and close time") }}</p>
         </ion-label>
-        <ion-datetime-button datetime="DailyStartTime">
-          <ion-label :slot="selectedTimesForWeek.DailyStartTime ? '' : 'time-target'">
-            <p >{{ translate("Start Time") }}</p>
-          </ion-label>
-        </ion-datetime-button>
+        <ion-chip color="medium" @click="openTimeModal('DailyStartTime', selectedTimesForWeek['DailyStartTime'])">
+          {{ selectedTimesForWeek['DailyStartTime'] ? getTime(selectedTimesForWeek['DailyStartTime']) : 'Start Time' }}
+          <ion-icon v-if="selectedTimesForWeek['DailyStartTime']" :icon="closeCircle" @click="clearSelectedTime('DailyStartTime')" @click.stop />
+        </ion-chip>
         -
-        <ion-datetime-button datetime="DailyEndTime">
-          <ion-label :slot="selectedTimesForWeek.DailyEndTime ? '' : 'time-target'">
-            <p >{{ translate("End Time") }}</p>
-          </ion-label>
-        </ion-datetime-button>
+        <ion-chip color="medium" @click="openTimeModal('DailyEndTime', selectedTimesForWeek['DailyEndTime'])">
+          {{ selectedTimesForWeek['DailyEndTime'] ? getTime(selectedTimesForWeek['DailyEndTime']) : 'End Time' }}
+          <ion-icon v-if="selectedTimesForWeek['DailyEndTime']" :icon="closeCircle" @click="clearSelectedTime('DailyEndTime')" @click.stop />
+        </ion-chip>
       </ion-item>
     </ion-list>
   </ion-content>
 
-  <ion-modal class="date-time-modal" v-for="(day, index) in days"  :key="index" :keep-contents-mounted="true">
-    <ion-datetime :id="day+'StartTime'" v-model="selectedTimesForWeek[day+'StartTime']" presentation="time" show-clear-button show-default-buttons hour-cycle="h12" />
-  </ion-modal>
-
-  <ion-modal class="date-time-modal" v-for="(day, index) in days" :key="index" :keep-contents-mounted="true">
-    <ion-datetime :id="day+'EndTime'" v-model="selectedTimesForWeek[day+'EndTime']" presentation="time" show-clear-button show-default-buttons hour-cycle="h12" />
+  <ion-modal class="date-time-modal" :is-open="isTimeModalOpen" @didDismiss="() => isTimeModalOpen = false">
+    <ion-content :force-overscroll="false">
+      <ion-datetime
+        show-default-buttons
+        hour-cycle="h12"
+        presentation="time"
+        :value="selectedTimesForWeek[selectedDayKey] ? selectedTimesForWeek[selectedDayKey] : ''"
+        @ionChange="updateTime($event)"
+      />
+    </ion-content>
   </ion-modal>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
@@ -75,14 +75,14 @@
     </ion-fab-button>
   </ion-fab>
 </template>
-  
+
 <script lang="ts">
 import { 
   IonButton,
   IonButtons,
+  IonChip,
   IonContent,
   IonDatetime,
-  IonDatetimeButton,
   IonFab,
   IonFabButton,
   IonHeader,
@@ -99,7 +99,7 @@ import {
   modalController
 } from "@ionic/vue";
 import { defineComponent } from "vue";
-import { closeOutline, saveOutline } from "ionicons/icons";
+import { closeCircle, closeOutline, saveOutline } from "ionicons/icons";
 import { translate } from '@hotwax/dxp-components'
 import { FacilityService } from "@/services/FacilityService";
 import logger from "@/logger";
@@ -113,9 +113,9 @@ export default defineComponent({
   components: { 
     IonButton,
     IonButtons,
+    IonChip,
     IonContent,
     IonDatetime,
-    IonDatetimeButton,
     IonFab,
     IonFabButton,
     IonHeader,
@@ -135,6 +135,8 @@ export default defineComponent({
       isDailyTimingsChecked: false as boolean,
       days: ['Daily'],
       selectedTimesForWeek: {} as any,
+      selectedDayKey: 'None',
+      isTimeModalOpen: false
     }
   },
   props: ['facilityId'],
@@ -147,6 +149,16 @@ export default defineComponent({
     closeModal() {
       modalController.dismiss({ dismissed: true});
     },
+    clearSelectedTime(timeKey: string) {
+      this.selectedTimesForWeek[timeKey] = ''
+    },
+    async openTimeModal(timeKeyId: string, timeValue: any) {
+      this.selectedDayKey = timeKeyId
+      this.isTimeModalOpen = true
+    },
+    updateTime(event: CustomEvent) {
+      this.selectedTimesForWeek[this.selectedDayKey] = event.detail.value      
+    },
     updateDailyTimings() {
       this.isDailyTimingsChecked = !this.isDailyTimingsChecked
       this.days = this.isDailyTimingsChecked ? ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'] : ['Daily']
@@ -241,12 +253,16 @@ export default defineComponent({
       }
 
       return formatedEndTime - formatedStartTime
+    },
+    getTime(time: any) {
+      return DateTime.fromISO(time, {setZone: true}).toFormat('hh:mm a')
     }
   },
   setup() {
     const store = useStore();
 
     return {
+      closeCircle,
       closeOutline,
       saveOutline,
       store,
@@ -262,7 +278,10 @@ ion-content {
 }
 ion-modal.date-time-modal {
   --width: 290px;
-  --height: 440px;
+  --height: 252px;
   --border-radius: 8px;
 }
+ion-modal.date-time-modal::part(backdrop) {
+  --backdrop-opacity: 0.32;
+}
 </style>
\ No newline at end of file

From db37516e8181f41f8c89bc383b4e303afa60b0cf Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Mon, 4 Dec 2023 18:56:14 +0530
Subject: [PATCH 2/5] Improved: variable name, method arguments (#44)

---
 src/components/CustomScheduleModal.vue | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/CustomScheduleModal.vue b/src/components/CustomScheduleModal.vue
index f85574e9..1f875fbe 100644
--- a/src/components/CustomScheduleModal.vue
+++ b/src/components/CustomScheduleModal.vue
@@ -27,14 +27,14 @@
         <ion-label>
           <p>{{ translate(day.charAt(0).toUpperCase() + day.slice(1)) }}</p>
         </ion-label>
-        <ion-chip color="medium" @click="openTimeModal(day+'StartTime', selectedTimesForWeek[day+'StartTime'])">
+        <ion-chip @click="openTimeModal(day+'StartTime')">
           {{ selectedTimesForWeek[day+'StartTime'] ? getTime(selectedTimesForWeek[day+'StartTime']) : 'Start Time' }}
           <ion-icon v-if="selectedTimesForWeek[day+'StartTime']" :icon="closeCircle" @click="clearSelectedTime(day+'StartTime')" @click.stop />
         </ion-chip>
         -
-        <ion-chip color="medium" @click="openTimeModal(day+'EndTime', selectedTimesForWeek[day+'EndTime'])">
+        <ion-chip @click="openTimeModal(day+'EndTime')">
           {{ selectedTimesForWeek[day+'EndTime'] ? getTime(selectedTimesForWeek[day+'EndTime']) : 'End Time' }}
-          <ion-icon v-if="selectedTimesForWeek[day+'EndTime']" :icon="closeCircle" @click="clearSelectedTime(day+'StartTime')" @click.stop />
+          <ion-icon v-if="selectedTimesForWeek[day+'EndTime']" :icon="closeCircle" @click="clearSelectedTime(day+'EndTime')" @click.stop />
         </ion-chip>
       </ion-item>
     </ion-list>
@@ -44,12 +44,12 @@
         <ion-label>
           <p>{{ translate("Open and close time") }}</p>
         </ion-label>
-        <ion-chip color="medium" @click="openTimeModal('DailyStartTime', selectedTimesForWeek['DailyStartTime'])">
+        <ion-chip @click="openTimeModal('DailyStartTime')">
           {{ selectedTimesForWeek['DailyStartTime'] ? getTime(selectedTimesForWeek['DailyStartTime']) : 'Start Time' }}
           <ion-icon v-if="selectedTimesForWeek['DailyStartTime']" :icon="closeCircle" @click="clearSelectedTime('DailyStartTime')" @click.stop />
         </ion-chip>
         -
-        <ion-chip color="medium" @click="openTimeModal('DailyEndTime', selectedTimesForWeek['DailyEndTime'])">
+        <ion-chip @click="openTimeModal('DailyEndTime')">
           {{ selectedTimesForWeek['DailyEndTime'] ? getTime(selectedTimesForWeek['DailyEndTime']) : 'End Time' }}
           <ion-icon v-if="selectedTimesForWeek['DailyEndTime']" :icon="closeCircle" @click="clearSelectedTime('DailyEndTime')" @click.stop />
         </ion-chip>
@@ -63,7 +63,7 @@
         show-default-buttons
         hour-cycle="h12"
         presentation="time"
-        :value="selectedTimesForWeek[selectedDayKey] ? selectedTimesForWeek[selectedDayKey] : ''"
+        :value="selectedTimesForWeek[selectedDayTime] ? selectedTimesForWeek[selectedDayTime] : ''"
         @ionChange="updateTime($event)"
       />
     </ion-content>
@@ -135,7 +135,7 @@ export default defineComponent({
       isDailyTimingsChecked: false as boolean,
       days: ['Daily'],
       selectedTimesForWeek: {} as any,
-      selectedDayKey: 'None',
+      selectedDayTime: '',
       isTimeModalOpen: false
     }
   },
@@ -149,15 +149,15 @@ export default defineComponent({
     closeModal() {
       modalController.dismiss({ dismissed: true});
     },
-    clearSelectedTime(timeKey: string) {
-      this.selectedTimesForWeek[timeKey] = ''
+    clearSelectedTime(selectedDayTime: string) {
+      this.selectedTimesForWeek[selectedDayTime] = ''
     },
-    async openTimeModal(timeKeyId: string, timeValue: any) {
-      this.selectedDayKey = timeKeyId
+    async openTimeModal(selectedDayTime: string) {
+      this.selectedDayTime = selectedDayTime
       this.isTimeModalOpen = true
     },
     updateTime(event: CustomEvent) {
-      this.selectedTimesForWeek[this.selectedDayKey] = event.detail.value      
+      this.selectedTimesForWeek[this.selectedDayTime] = event.detail.value
     },
     updateDailyTimings() {
       this.isDailyTimingsChecked = !this.isDailyTimingsChecked

From 96966d7a529ad986f9ee9b2b52795ae69ee66de2 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Mon, 4 Dec 2023 19:34:45 +0530
Subject: [PATCH 3/5] Improved: code to send data in needed format(#44)

---
 src/components/CustomScheduleModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CustomScheduleModal.vue b/src/components/CustomScheduleModal.vue
index 1f875fbe..479c66d9 100644
--- a/src/components/CustomScheduleModal.vue
+++ b/src/components/CustomScheduleModal.vue
@@ -202,7 +202,7 @@ export default defineComponent({
         }
       } else {
         this.days.map((day: string) => {
-          const startTime = this.selectedTimesForWeek[day+'StartTime']
+          const startTime = DateTime.fromISO(this.selectedTimesForWeek[day+'StartTime'], {setZone: true}).toFormat('HH:mm:ss')
           const capacity = this.getCapacity(this.selectedTimesForWeek[day+'StartTime'], this.selectedTimesForWeek[day+'EndTime'])
           if(startTime && capacity) {
             payload[day+'StartTime'] = startTime

From 0922c06fe7846ca9b29fd34fba61bc9ff188a358 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Tue, 5 Dec 2023 09:34:38 +0530
Subject: [PATCH 4/5] Improved: code for removing scroll in time picker modal
 (#44)

---
 src/components/CustomScheduleModal.vue | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/CustomScheduleModal.vue b/src/components/CustomScheduleModal.vue
index 479c66d9..55c5a077 100644
--- a/src/components/CustomScheduleModal.vue
+++ b/src/components/CustomScheduleModal.vue
@@ -58,15 +58,13 @@
   </ion-content>
 
   <ion-modal class="date-time-modal" :is-open="isTimeModalOpen" @didDismiss="() => isTimeModalOpen = false">
-    <ion-content :force-overscroll="false">
-      <ion-datetime
-        show-default-buttons
-        hour-cycle="h12"
-        presentation="time"
-        :value="selectedTimesForWeek[selectedDayTime] ? selectedTimesForWeek[selectedDayTime] : ''"
-        @ionChange="updateTime($event)"
-      />
-    </ion-content>
+    <ion-datetime
+      show-default-buttons
+      hour-cycle="h12"
+      presentation="time"
+      :value="selectedTimesForWeek[selectedDayTime] ? selectedTimesForWeek[selectedDayTime] : ''"
+      @ionChange="updateTime($event)"
+    />
   </ion-modal>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">

From 3451c184759112b34277fe5bc24cff89612f9c65 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Tue, 5 Dec 2023 09:38:54 +0530
Subject: [PATCH 5/5] Improved: label of operating hours popover (#44)

---
 src/components/OperatingHoursPopover.vue | 4 ++--
 src/locales/en.json                      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/OperatingHoursPopover.vue b/src/components/OperatingHoursPopover.vue
index 354cb183..da9eee35 100644
--- a/src/components/OperatingHoursPopover.vue
+++ b/src/components/OperatingHoursPopover.vue
@@ -9,12 +9,12 @@
       </ion-item>
       <ion-item button @click="addCustomSchedule">
         <ion-label>
-          {{ translate("Add custom schedules") }}
+          {{ translate("Add custom schedule") }}
         </ion-label>
       </ion-item>
       <ion-item button lines="none" @click="removeCalendarFromFacility">
         <ion-label>
-          {{ translate("Remove schedules") }}
+          {{ translate("Remove schedule") }}
         </ion-label>
       </ion-item>
     </ion-list>
diff --git a/src/locales/en.json b/src/locales/en.json
index b9dd2822..ccc7d8b5 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -10,7 +10,7 @@
   "Address": "Address",
   "Address line 1": "Address line 1",
   "Address line 2": "Address line 2",
-  "Add custom schedules": "Add custom schedules",
+  "Add custom schedule": "Add custom schedule",
   "Add operating hours": "Add operating hours",
   "add your location ID from Shopify": "add your location ID from Shopify",
   "Add your location ID from Shopify": "Add your location ID from Shopify",
@@ -182,7 +182,7 @@
   "Regenerate": "Regenerate",
   "Remove": "Remove",
   "Remove location": "Remove location",
-  "Remove schedules": "Remove schedules",
+  "Remove schedule": "Remove schedule",
   "Removed facility mapping successfully": "Removed facility mapping successfully",
   "Removed shopify mapping successfully": "Removed shopify mapping successfully",
   "Reset": "Reset",