feat: allow to set mute duration and notifications mute option (#2665)

components/modal/ModalConfirm.vue

@@ -1,11 +1,34 @@
 <script setup lang="ts">
-import type { ConfirmDialogChoice, ConfirmDialogLabel } from '~/types'
+import type { ConfirmDialogChoice, ConfirmDialogOptions } from '~/types'
+import DurationPicker from '~/components/modal/DurationPicker.vue'
 
-defineProps<ConfirmDialogLabel>()
+const props = defineProps<ConfirmDialogOptions>()
 
 const emit = defineEmits<{
   (evt: 'choice', choice: ConfirmDialogChoice): void
 }>()
+
+const hasDuration = ref(false)
+const isValidDuration = ref(true)
+const duration = ref(60 * 60) // default to 1 hour
+const shouldMuteNotifications = ref(true)
+const isMute = computed(() => props.extraOptionType === 'mute')
+
+function handleChoice(choice: ConfirmDialogChoice['choice']) {
+  const dialogChoice = {
+    choice,
+    ...isMute && {
+      extraOptions: {
+        mute: {
+          duration: hasDuration.value ? duration.value : 0,
+          notifications: shouldMuteNotifications.value,
+        },
+      },
+    },
+  }
+
+  emit('choice', dialogChoice)
+}
 </script>
 
 <template>
@@ -16,11 +39,17 @@ const emit = defineEmits<{
     <div v-if="description">
       {{ description }}
     </div>
+    <div v-if="isMute" flex-col flex gap-4>
+      <CommonCheckbox v-model="hasDuration" :label="$t('confirm.mute_account.specify_duration')" prepend-checkbox checked-icon-color="text-primary" />
+      <DurationPicker v-if="hasDuration" v-model="duration" v-model:is-valid="isValidDuration" />
+      <CommonCheckbox v-model="shouldMuteNotifications" :label="$t('confirm.mute_account.notifications')" prepend-checkbox checked-icon-color="text-primary" />
+    </div>
+
     <div flex justify-end gap-2>
-      <button btn-text @click="emit('choice', 'cancel')">
+      <button btn-text @click="handleChoice('cancel')">
         {{ cancel || $t('confirm.common.cancel') }}
       </button>
-      <button btn-solid @click="emit('choice', 'confirm')">
+      <button btn-solid :disabled="!isValidDuration" @click="handleChoice('confirm')">
         {{ confirm || $t('confirm.common.confirm') }}
       </button>
     </div>