Finalize Typescript restructure

resources/scripts-v2/features/company/estimates/components/EstimateBasicFields.vue

@@ -1,15 +1,14 @@
 <template>
   <div class="md:grid-cols-12 grid-cols-1 md:gap-x-6 mt-6 mb-8 grid gap-y-5">
     <BaseCustomerSelectPopup
-      v-model="estimateStore.newEstimate.customer"
       :valid="v.customer_id"
       :content-loading="isLoading"
       type="estimate"
-      class="col-span-5 pr-0"
+      class="col-span-6 pr-0"
     />
 
     <BaseInputGrid
-      class="col-span-7 rounded-xl shadow border border-line-light bg-surface p-5"
+      class="col-span-6 rounded-xl shadow border border-line-light bg-surface p-5"
     >
       <BaseInputGroup
         :label="$t('reports.estimates.estimate_date')"

resources/scripts-v2/features/company/estimates/components/EstimateDropdown.vue

@@ -135,6 +135,8 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { useEstimateStore } from '../store'
+import { useDialogStore } from '../../../../stores/dialog.store'
+import { useModalStore } from '../../../../stores/modal.store'
 import type { Estimate } from '../../../../types/domain/estimate'
 
 interface TableRef {
@@ -163,6 +165,8 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const estimateStore = useEstimateStore()
+const dialogStore = useDialogStore()
+const modalStore = useModalStore()
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
@@ -177,46 +181,70 @@ const canResendEstimate = computed<boolean>(() => {
   )
 })
 
-async function removeEstimate(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_delete'))
-  if (!confirmed) return
-
-  const res = await estimateStore.deleteEstimate({ ids: [props.row.id] })
-  if (res.data) {
-    props.table?.refresh()
-    if (res.data.success) {
-      router.push('/admin/estimates')
+function removeEstimate(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('estimates.confirm_delete'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'danger',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      const response = await estimateStore.deleteEstimate({ ids: [props.row.id] })
+      if (response.data) {
+        props.table?.refresh()
+        if (response.data.success) {
+          router.push('/admin/estimates')
+        }
+        estimateStore.$patch((state) => {
+          state.selectedEstimates = []
+          state.selectAllField = false
+        })
+      }
     }
-    estimateStore.$patch((state) => {
-      state.selectedEstimates = []
-      state.selectAllField = false
-    })
-  }
+  })
 }
 
-async function convertToInvoice(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_conversion'))
-  if (!confirmed) return
-
-  const res = await estimateStore.convertToInvoice(props.row.id)
-  if (res.data) {
-    router.push(`/admin/invoices/${res.data.data.id}/edit`)
-  }
+function convertToInvoice(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('estimates.confirm_conversion'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'primary',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      const response = await estimateStore.convertToInvoice(props.row.id)
+      if (response.data) {
+        router.push(`/admin/invoices/${response.data.data.id}/edit`)
+      }
+    }
+  })
 }
 
-async function onMarkAsSent(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_mark_as_sent'))
-  if (!confirmed) return
-
-  await estimateStore.markAsSent({ id: props.row.id, status: 'SENT' })
-  props.table?.refresh()
+function onMarkAsSent(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('estimates.confirm_mark_as_sent'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'primary',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      await estimateStore.markAsSent({ id: props.row.id, status: 'SENT' })
+      props.table?.refresh()
+    }
+  })
 }
 
 function sendEstimate(): void {
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('estimates.send_estimate'),
     componentName: 'SendEstimateModal',
     id: props.row.id,
@@ -225,20 +253,38 @@ function sendEstimate(): void {
   })
 }
 
-async function onMarkAsAccepted(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_mark_as_accepted'))
-  if (!confirmed) return
-
-  await estimateStore.markAsAccepted({ id: props.row.id, status: 'ACCEPTED' })
-  props.table?.refresh()
+function onMarkAsAccepted(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('estimates.confirm_mark_as_accepted'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'primary',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      await estimateStore.markAsAccepted({ id: props.row.id, status: 'ACCEPTED' })
+      props.table?.refresh()
+    }
+  })
 }
 
-async function onMarkAsRejected(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_mark_as_rejected'))
-  if (!confirmed) return
-
-  await estimateStore.markAsRejected({ id: props.row.id, status: 'REJECTED' })
-  props.table?.refresh()
+function onMarkAsRejected(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('estimates.confirm_mark_as_rejected'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'danger',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      await estimateStore.markAsRejected({ id: props.row.id, status: 'REJECTED' })
+      props.table?.refresh()
+    }
+  })
 }
 
 function copyPdfUrl(): void {
@@ -253,11 +299,20 @@ function copyPdfUrl(): void {
   })
 }
 
-async function cloneEstimateData(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_clone'))
-  if (!confirmed) return
-
-  const res = await estimateStore.cloneEstimate({ id: props.row.id })
-  router.push(`/admin/estimates/${res.data.data.id}/edit`)
+function cloneEstimateData(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('estimates.confirm_clone'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'primary',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      const response = await estimateStore.cloneEstimate({ id: props.row.id })
+      router.push(`/admin/estimates/${response.data.data.id}/edit`)
+    }
+  })
 }
 </script>

resources/scripts-v2/features/company/estimates/components/SendEstimateModal.vue

@@ -0,0 +1,321 @@
+<template>
+  <BaseModal
+    :show="modalActive"
+    @close="closeSendEstimateModal"
+    @open="setInitialData"
+  >
+    <template #header>
+      <div class="flex justify-between w-full">
+        {{ modalStore.title }}
+        <BaseIcon
+          name="XMarkIcon"
+          class="h-6 w-6 text-muted cursor-pointer"
+          @click="closeSendEstimateModal"
+        />
+      </div>
+    </template>
+
+    <form v-if="!isPreview" action="">
+      <div class="px-8 py-8 sm:p-6">
+        <BaseInputGrid layout="one-column">
+          <BaseInputGroup
+            :label="$t('general.from')"
+            required
+            :error="v$.from.$error && v$.from.$errors[0].$message"
+          >
+            <BaseInput
+              v-model="estimateMailForm.from"
+              type="text"
+              :invalid="v$.from.$error"
+              @input="v$.from.$touch()"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :label="$t('general.to')"
+            required
+            :error="v$.to.$error && v$.to.$errors[0].$message"
+          >
+            <BaseInput
+              v-model="estimateMailForm.to"
+              type="text"
+              :invalid="v$.to.$error"
+              @input="v$.to.$touch()"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :label="$t('general.cc')"
+            :error="v$.cc && v$.cc.$error && v$.cc.$errors[0].$message"
+          >
+            <BaseInput
+              v-model="estimateMailForm.cc"
+              type="email"
+              :invalid="v$.cc && v$.cc.$error"
+              @input="v$.cc && v$.cc.$touch()"
+              placeholder="Optional: CC recipient"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :label="$t('general.bcc')"
+            :error="v$.bcc && v$.bcc.$error && v$.bcc.$errors[0].$message"
+          >
+            <BaseInput
+              v-model="estimateMailForm.bcc"
+              type="email"
+              :invalid="v$.bcc && v$.bcc.$error"
+              @input="v$.bcc && v$.bcc.$touch()"
+              placeholder="Optional: BCC recipient"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :label="$t('general.subject')"
+            required
+            :error="v$.subject.$error && v$.subject.$errors[0].$message"
+          >
+            <BaseInput
+              v-model="estimateMailForm.subject"
+              type="text"
+              :invalid="v$.subject.$error"
+              @input="v$.subject.$touch()"
+            />
+          </BaseInputGroup>
+          <BaseInputGroup
+            :label="$t('general.body')"
+            :error="v$.body.$error && v$.body.$errors[0].$message"
+            required
+          >
+            <BaseCustomInput
+              v-model="estimateMailForm.body"
+              :fields="['customer', 'company', 'estimate']"
+            />
+          </BaseInputGroup>
+        </BaseInputGrid>
+      </div>
+      <div
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
+      >
+        <BaseButton
+          class="mr-3"
+          variant="primary-outline"
+          type="button"
+          @click="closeSendEstimateModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+
+        <BaseButton
+          :loading="isLoading"
+          :disabled="isLoading"
+          variant="primary"
+          type="button"
+          class="mr-3"
+          @click="submitForm"
+        >
+          <BaseIcon v-if="!isLoading" name="PhotoIcon" class="h-5 mr-2" />
+          {{ $t('general.preview') }}
+        </BaseButton>
+      </div>
+    </form>
+    <div v-else>
+      <div class="my-6 mx-4 border border-line-default relative">
+        <BaseButton
+          class="absolute top-4 right-4"
+          :disabled="isLoading"
+          variant="primary-outline"
+          @click="cancelPreview"
+        >
+          <BaseIcon name="PencilIcon" class="h-5 mr-2" />
+          {{ $t('general.edit') }}
+        </BaseButton>
+        <iframe
+          :src="templateUrl"
+          frameborder="0"
+          class="w-full"
+          style="min-height: 500px"
+        ></iframe>
+      </div>
+
+      <div
+        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
+      >
+        <BaseButton
+          class="mr-3"
+          variant="primary-outline"
+          type="button"
+          @click="closeSendEstimateModal"
+        >
+          {{ $t('general.cancel') }}
+        </BaseButton>
+        <BaseButton
+          :loading="isLoading"
+          :disabled="isLoading"
+          variant="primary"
+          type="button"
+          @click="submitForm"
+        >
+          <BaseIcon
+            v-if="!isLoading"
+            name="PaperAirplaneIcon"
+            class="h-5 mr-2"
+          />
+          {{ $t('general.send') }}
+        </BaseButton>
+      </div>
+    </div>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, email, helpers } from '@vuelidate/validators'
+import { useVuelidate } from '@vuelidate/core'
+import { useModalStore } from '../../../../stores/modal.store'
+import { useCompanyStore } from '../../../../stores/company.store'
+import { useNotificationStore } from '../../../../stores/notification.store'
+import { useEstimateStore } from '../store'
+
+const modalStore = useModalStore()
+const companyStore = useCompanyStore()
+const notificationStore = useNotificationStore()
+const estimateStore = useEstimateStore()
+
+const { t } = useI18n()
+const isLoading = ref(false)
+const templateUrl = ref<string>('')
+const isPreview = ref(false)
+
+const emit = defineEmits(['update'])
+
+const estimateMailForm = reactive({
+  id: null as number | null,
+  from: null as string | null,
+  to: null as string | null,
+  cc: null as string | null,
+  bcc: null as string | null,
+  subject: t('estimates.new_estimate'),
+  body: null as string | null,
+})
+
+const modalActive = computed(() => {
+  return modalStore.active && modalStore.componentName === 'SendEstimateModal'
+})
+
+const modalData = computed(() => {
+  return modalStore.data as Record<string, unknown> | null
+})
+
+const rules = {
+  from: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  to: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  cc: {
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  bcc: {
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+  subject: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  body: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}
+
+const v$ = useVuelidate(
+  rules,
+  computed(() => estimateMailForm),
+)
+
+function cancelPreview() {
+  isPreview.value = false
+}
+
+async function setInitialData() {
+  const admin = await companyStore.fetchBasicMailConfig()
+
+  estimateMailForm.id = modalStore.id as number
+
+  if (admin.data) {
+    estimateMailForm.from = (admin.data as Record<string, string>).from_mail
+  }
+
+  if (modalData.value) {
+    const customer = modalData.value.customer as Record<string, string> | undefined
+    if (customer) {
+      estimateMailForm.to = customer.email
+    }
+  }
+
+  estimateMailForm.body =
+    companyStore.selectedCompanySettings.estimate_mail_body
+  estimateMailForm.subject = t('estimates.new_estimate')
+}
+
+async function submitForm() {
+  v$.value.$touch()
+
+  if (v$.value.$invalid) {
+    return true
+  }
+
+  try {
+    isLoading.value = true
+
+    if (!isPreview.value) {
+      const previewResponse = await estimateStore.previewEstimate(
+        estimateMailForm as unknown as { id: number },
+      )
+      isLoading.value = false
+
+      isPreview.value = true
+      const blob = new Blob([(previewResponse as { data: string }).data], {
+        type: 'text/html',
+      })
+      templateUrl.value = URL.createObjectURL(blob)
+
+      return
+    }
+
+    await estimateStore.sendEstimate(
+      estimateMailForm as unknown as Parameters<typeof estimateStore.sendEstimate>[0],
+    )
+
+    isLoading.value = false
+
+    notificationStore.showNotification({
+      type: 'success',
+      message: 'estimates.estimate_sent_successfully',
+    })
+
+    if (modalStore.refreshData) {
+      modalStore.refreshData()
+    }
+
+    emit('update')
+    closeSendEstimateModal()
+  } catch (error) {
+    console.error(error)
+    isLoading.value = false
+    notificationStore.showNotification({
+      type: 'error',
+      message: 'estimates.something_went_wrong',
+    })
+  }
+}
+
+function closeSendEstimateModal() {
+  modalStore.closeModal()
+
+  setTimeout(() => {
+    v$.value.$reset()
+    isPreview.value = false
+    templateUrl.value = ''
+  }, 300)
+}
+</script>