webMontime/src/views/app/AppRegisterBusinessView.vue

<template>
  <ResponsiveAppLayout>
    <h1 class="mb-1 text-xl font-bold text-text">ثبت کسب‌وکار</h1>
    <p class="mb-6 text-sm text-muted">درخواست شما پس از بررسی ادمین تأیید می‌شود.</p>

    <form class="mx-auto max-w-lg space-y-4" @submit.prevent="onSubmit">
      <p
        v-if="message"
        class="rounded-xl border border-brand-500/40 bg-brand-500/10 px-4 py-3 text-sm text-brand-700 dark:text-brand-500"
      >
        {{ message }}
      </p>
      <p
        v-if="error"
        class="rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600 dark:text-red-400"
      >
        {{ error }}
      </p>

      <AppInput id="bizTitle" v-model="form.businessTitle" label="نام کسب‌وکار" required />
      <AppSelect
        id="bizCategory"
        v-model="form.categoryId"
        label="دسته‌بندی"
        :options="categoryOptions"
        required
      />
      <AppTextarea id="bizDescription" v-model="form.description" label="توضیحات" />
      <AppInput id="bizAddress" v-model="form.address" label="آدرس" />
      <AppInput id="bizPhone" v-model="form.phone" label="تلفن" ltr />

      <AppButton type="submit" :loading="loading">ارسال درخواست</AppButton>
    </form>
  </ResponsiveAppLayout>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { fetchBusinessCategories } from '@/api/business-categories';
import { submitBusinessRegistration } from '@/api/business-registrations';
import { ApiError } from '@/api/client';
import type { BusinessCategory } from '@/api/types';
import AppButton from '@/components/ui/AppButton.vue';
import AppInput from '@/components/ui/AppInput.vue';
import AppSelect from '@/components/ui/AppSelect.vue';
import AppTextarea from '@/components/ui/AppTextarea.vue';
import ResponsiveAppLayout from '@/layouts/ResponsiveAppLayout.vue';

const categories = ref<BusinessCategory[]>([]);
const loading = ref(false);
const error = ref('');
const message = ref('');
const form = ref({
  businessTitle: '',
  categoryId: '',
  description: '',
  address: '',
  phone: '',
});

const categoryOptions = computed(() =>
  categories.value
    .filter((category) => category.isActive)
    .map((category) => ({ value: category.id, label: category.title })),
);

async function onSubmit() {
  error.value = '';
  message.value = '';
  loading.value = true;
  try {
    await submitBusinessRegistration({
      businessTitle: form.value.businessTitle.trim(),
      categoryId: form.value.categoryId,
      description: form.value.description.trim() || undefined,
      address: form.value.address.trim() || undefined,
      phone: form.value.phone.trim() || undefined,
    });
    message.value = 'درخواست شما ثبت شد. پس از بررسی نتیجه اعلام می‌شود.';
    form.value = {
      businessTitle: '',
      categoryId: '',
      description: '',
      address: '',
      phone: '',
    };
  } catch (e) {
    error.value = e instanceof ApiError ? e.message : 'ثبت درخواست ناموفق بود.';
  } finally {
    loading.value = false;
  }
}

onMounted(async () => {
  try {
    categories.value = await fetchBusinessCategories();
  } catch {
    error.value = 'بارگذاری دسته‌بندی‌ها ناموفق بود.';
  }
});
</script>