banu-front/src/features/admin/services/components/modals/SendMessageModal.vue

<template>
  <BasicModal
    title="ارسال پیام"
    title-en="Send message"
    width="95%"
    max-width="58rem"
    min-width="auto"
    :show-close-button="true"
  >
    <template #default="{ close }">
      <form class="send-message" @submit.prevent="onSubmit(close)">
        <div class="send-message__row send-message__row--two">
          <SelectField
            v-model="form.category"
            name="category"
            label="دسته بندی"
            placeholder="انتخاب کنید"
            :options="categoryOptions"
            option-label="label"
            option-value="value"
          />
          <SelectField
            v-model="form.priority"
            name="priority"
            label="اولویت پیام"
            placeholder="انتخاب کنید"
            :options="priorityOptions"
            option-label="label"
            option-value="value"
          />
        </div>

        <div class="send-message__row">
          <TextareaField
            v-model="form.description"
            name="description"
            label="توضیحات خود را وارد کنید"
            :row="4"
          />
        </div>

        <div class="send-message__divider" />

        <footer class="send-message__footer">
          <button type="button" class="send-message__cancel" @click="close">
            <span>منصرف شدم</span>
            <SvgIcon name="caret-down" :size="16" color="currentColor" />
          </button>
          <BaseButton
            type="submit"
            text="ارسال"
            custom-class="send-message__submit"
            :disabled="!canSubmit"
            :loading="sendMutation.isPending.value"
          >
            <template #appendIcon>
              <SvgIcon name="arrow-left" :size="18" color="#fff" />
            </template>
          </BaseButton>
        </footer>
      </form>
    </template>
  </BasicModal>
</template>

<script setup>
import { computed, ref } from 'vue'
import { toast } from 'vue3-toastify'
import useModal from '@/composables/useModal'
import { useQueryClient } from '@tanstack/vue-query'
import BasicModal from '@/components/BasicModal.vue'
import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import SelectField from '@/components/form/SelectField.vue'
import TextareaField from '@/components/form/TextareaField.vue'
import {
  adminServicesKeys,
  useSendAdminServiceMessageMutation,
} from '@/services/query/admin-services'

defineOptions({ name: 'SendMessageModal' })

const { getModal } = useModal()
const queryClient = useQueryClient()

const modalData = computed(() => getModal('SendMessageModal')?.data ?? {})
const serviceId = computed(() => modalData.value.id ?? null)

// FE-only — the message endpoint doesn't accept category. Keeping the dropdown
// visible per the Figma until the backend supports it.
const categoryOptions = [
  { value: 'general', label: 'عمومی' },
  { value: 'financial', label: 'مالی' },
  { value: 'technical', label: 'فنی' },
  { value: 'other', label: 'سایر' },
]

const priorityOptions = [
  { value: 'very_urgent', label: 'بسیار فوری' },
  { value: 'urgent', label: 'فوری' },
  { value: 'normal', label: 'عادی' },
  { value: 'low', label: 'کم اهمیت' },
]

const form = ref({
  category: '',
  priority: '',
  description: '',
})

const canSubmit = computed(
  () => form.value.category && form.value.priority && form.value.description.trim().length > 0
)

const sendMutation = useSendAdminServiceMessageMutation()

const onSubmit = async (close) => {
  if (!canSubmit.value || !serviceId.value) return
  // Backend POST /admin/tickets/:id/messages accepts only { message }.
  // category + priority are collected in the form but not yet supported
  // server-side (see backend-vs-ui-gaps).
  await sendMutation.mutateAsync({
    id: serviceId.value,
    payload: { message: form.value.description.trim() },
  })
  await queryClient.invalidateQueries({ queryKey: adminServicesKeys.all })
  toast.success('پیام با موفقیت ارسال شد')
  close?.()
}
</script>

<style lang="scss" scoped>
.send-message {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: start;
  padding-block: 0.5rem;

  &__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;

    &--two {
      @media (min-width: 640px) {
        grid-template-columns: 1fr 1fr;
      }
    }
  }

  &__divider {
    border-block-end: 1px solid #ddd;
    margin-block: 0.5rem;
  }

  &__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  &__cancel {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    font-family: var(--font-family-fa);
    font-size: 0.875rem;
    font-weight: 500;
    color: #969696;

    &:hover {
      color: #6b6b6b;
    }
  }

  &__submit {
    min-width: 17rem;
    padding: 0 1.5rem;
  }
}
</style>