Refactor install wizard and mail configuration

resources/scripts/features/company/settings/views/MailConfigView.vue

@@ -1,79 +1,107 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useModalStore } from '../../../../stores/modal.store'
+import { useNotificationStore } from '../../../../stores/notification.store'
 import { companyService } from '../../../../api/services/company.service'
 import { mailService } from '../../../../api/services/mail.service'
-import type { MailDriver } from '../../../../api/services/mail.service'
-import Smtp from '@/scripts/features/company/settings/components/SmtpMailDriver.vue'
-import Mailgun from '@/scripts/features/company/settings/components/MailgunMailDriver.vue'
-import Ses from '@/scripts/features/company/settings/components/SesMailDriver.vue'
-import Basic from '@/scripts/features/company/settings/components/BasicMailDriver.vue'
+import type { CompanyMailConfig, MailConfig, MailDriver } from '@/scripts/types/mail-config'
+import { getErrorTranslationKey, handleApiError } from '@/scripts/utils/error-handling'
+import MailConfigurationForm from '@/scripts/features/company/settings/components/MailConfigurationForm.vue'
 import MailTestModal from '@/scripts/features/company/settings/components/MailTestModal.vue'
 
 const { t } = useI18n()
 const modalStore = useModalStore()
+const notificationStore = useNotificationStore()
 
 const isSaving = ref<boolean>(false)
 const isFetchingInitialData = ref<boolean>(false)
 const useCustomMailConfig = ref<boolean>(false)
 
-const mailConfigData = ref<Record<string, unknown> | null>(null)
+const mailConfigData = ref<CompanyMailConfig | null>(null)
 const mailDrivers = ref<MailDriver[]>([])
-const currentMailDriver = ref<string>('smtp')
 
 loadData()
 
 async function loadData(): Promise<void> {
   isFetchingInitialData.value = true
-  const [driversResponse, configResponse] = await Promise.all([
-    mailService.getDrivers(),
-    companyService.getMailConfig(),
-  ])
-  mailDrivers.value = driversResponse
-  mailConfigData.value = configResponse
-  currentMailDriver.value = (configResponse.mail_driver as string) ?? 'smtp'
-  useCustomMailConfig.value =
-    (configResponse.use_custom_mail_config as string) === 'YES'
-  isFetchingInitialData.value = false
-}
+  try {
+    const [driversResponse, configResponse] = await Promise.all([
+      mailService.getDrivers(),
+      companyService.getMailConfig(),
+    ])
 
-function changeDriver(value: string): void {
-  currentMailDriver.value = value
-  if (mailConfigData.value) {
-    mailConfigData.value.mail_driver = value
+    mailDrivers.value = driversResponse
+    mailConfigData.value = configResponse
+    useCustomMailConfig.value = configResponse.use_custom_mail_config === 'YES'
+  } catch (error: unknown) {
+    const normalizedError = handleApiError(error)
+    notificationStore.showNotification({
+      type: 'error',
+      message: getErrorTranslationKey(normalizedError.message) ?? normalizedError.message,
+    })
+  } finally {
+    isFetchingInitialData.value = false
   }
 }
 
-const mailDriver = computed(() => {
-  if (currentMailDriver.value === 'smtp') return Smtp
-  if (currentMailDriver.value === 'mailgun') return Mailgun
-  if (currentMailDriver.value === 'sendmail') return Basic
-  if (currentMailDriver.value === 'ses') return Ses
-  if (currentMailDriver.value === 'mail') return Basic
-  return Smtp
-})
-
 watch(useCustomMailConfig, async (newVal, oldVal) => {
   if (oldVal === undefined) return
 
   if (!newVal) {
     isSaving.value = true
-    await companyService.saveMailConfig({
-      use_custom_mail_config: 'NO',
-      mail_driver: '',
-    })
-    isSaving.value = false
+    try {
+      await companyService.saveMailConfig({
+        use_custom_mail_config: 'NO',
+      })
+
+      if (mailConfigData.value) {
+        mailConfigData.value.use_custom_mail_config = 'NO'
+      }
+
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'settings.mail.company_mail_config_updated',
+      })
+    } catch (error: unknown) {
+      const normalizedError = handleApiError(error)
+      notificationStore.showNotification({
+        type: 'error',
+        message: getErrorTranslationKey(normalizedError.message) ?? normalizedError.message,
+      })
+      useCustomMailConfig.value = true
+    } finally {
+      isSaving.value = false
+    }
   }
 })
 
-async function saveEmailConfig(value: Record<string, unknown>): Promise<void> {
+async function saveEmailConfig(value: MailConfig): Promise<void> {
   try {
     isSaving.value = true
     await companyService.saveMailConfig({
       ...value,
       use_custom_mail_config: 'YES',
     })
+
+    if (mailConfigData.value) {
+      mailConfigData.value = {
+        ...mailConfigData.value,
+        ...value,
+        use_custom_mail_config: 'YES',
+      }
+    }
+
+    notificationStore.showNotification({
+      type: 'success',
+      message: 'settings.mail.company_mail_config_updated',
+    })
+  } catch (error: unknown) {
+    const normalizedError = handleApiError(error)
+    notificationStore.showNotification({
+      type: 'error',
+      message: getErrorTranslationKey(normalizedError.message) ?? normalizedError.message,
+    })
   } finally {
     isSaving.value = false
   }
@@ -104,13 +132,11 @@ function openMailTestModal(): void {
     </div>
 
     <div v-if="useCustomMailConfig && mailConfigData" class="mt-8">
-      <component
-        :is="mailDriver"
+      <MailConfigurationForm
         :config-data="mailConfigData"
         :is-saving="isSaving"
         :mail-drivers="mailDrivers"
         :is-fetching-initial-data="isFetchingInitialData"
-        @on-change-driver="(val: string) => changeDriver(val)"
         @submit-data="saveEmailConfig"
       >
         <BaseButton
@@ -122,7 +148,7 @@ function openMailTestModal(): void {
         >
           {{ $t('general.test_mail_conf') }}
         </BaseButton>
-      </component>
+      </MailConfigurationForm>
     </div>
 
     <div