Show confirmation modal on slug regeneration (#895)

* ➕ Show confirmation modal on slug regeneration

* 👕 Fix linter warnings

* 👕 Fix linter warnings

Author: devmount

frontend/src/components/ScheduleCreation.vue

@@ -17,6 +17,7 @@ import {
 } from '@/keys';
 
 import AppointmentCreatedModal from '@/components/AppointmentCreatedModal.vue';
+import ConfirmationModal from '@/components/ConfirmationModal.vue';
 import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
 import AlertBox from '@/elements/AlertBox.vue';
 import ToolTip from '@/elements/ToolTip.vue';
@@ -242,9 +243,6 @@ const savedConfirmation = reactive({
   show: false,
   title: '',
 });
-const closeCreatedModal = () => {
-  savedConfirmation.show = false;
-};
 
 // Revert the Schedule creation form to its initial values
 const revertForm = (resetData = true) => {
@@ -333,8 +331,19 @@ const saveSchedule = async (withConfirmation = true) => {
 };
 
 // Update slug with a random 8 character string
+const refreshSlugModalOpen = ref(false);
+const showRefreshSlugConfirmation = async () => {
+  refreshSlugModalOpen.value = true;
+};
+
+const closeModals = () => {
+  savedConfirmation.show = false;
+  refreshSlugModalOpen.value = false;
+};
+
 const refreshSlug = () => {
   scheduleInput.value.slug = window.crypto.randomUUID().substring(0, 8);
+  closeModals();
 };
 
 // handle schedule activation / deactivation
@@ -719,7 +728,7 @@ watch(
               </text-input>
               <link-button
                 class="p-0.5"
-                @click="scheduleInput.active ? refreshSlug() : null"
+                @click="scheduleInput.active ? showRefreshSlugConfirmation() : null"
                 :disabled="!scheduleInput.active"
                 data-testid="dashboard-booking-settings-link-refresh-btn"
               >
@@ -831,8 +840,18 @@ watch(
     :is-schedule="true"
     :title="savedConfirmation.title"
     :public-link="user.data.signedUrl"
-    @close="closeCreatedModal"
+    @close="closeModals"
   />
+  <!-- Refresh link confirmation modal -->
+  <confirmation-modal
+    :open="refreshSlugModalOpen"
+    :title="t('label.refreshLink')"
+    :message="t('text.refreshLinkNotice')"
+    :confirm-label="t('label.refresh')"
+    :cancel-label="t('label.cancel')"
+    @confirm="() => refreshSlug()"
+    @close="closeModals"
+  ></confirmation-modal>
 </template>
 
 <style scoped>