tehran_taj/apps/user-app/src/views/user/CompleteProfileView.vue

<!--
  "تکمیل پروفایل" — the customer uploads their three documents.

  Ported from henza_pwa/src/views/user/src/completeProfile.vue (route
  /complete_profile, name completeProfile), restyled into this app's design
  language. The LOGIC is the reference's and is identical in user-app-v2; only
  the styling differs.

  Kept from the reference:
  - the header title "تکمیل پروفایل" (completeProfile.vue:12) and the back
    arrow returning to the dashboard (:11)
  - exactly three uploads, in the reference's order and with its texts:
    جواز کسب, سردر مغازه, کارت ملی (:45-56)
  - the submit button "بارگذاری اطلاعات" (:81)
  - the client-side all-three check BEFORE posting, with the reference's own
    message "لطفا تمامی عکس های خواسته شده را آپلود کنید" (:191-198)
  - POST with the three snake_case ids (:193)
  - the success dialog with its text and its "متوجه شدم" button (:94-111),
    after which the reference navigated home (:175-181)

  Deliberately NOT ported: the reference's `window.setInterval(... reload)` in
  refresh() (:178-180), which reloaded the whole page every second FOREVER —
  an unterminated timer, not a refresh. The store is re-read once instead.

  The page is reachable only while the profile is incomplete; see the router
  guard, which mirrors the reference's (henza_pwa router/index.ts:266).
-->
<template>
  <div class="cpf">
    <PageBar title="تکمیل پروفایل" back-to="userPage::hasSubRoute" />

    <Spinner :spinning="submitting" tip="در حال ثبت اطلاعات">
      <container class="cpf__body">
        <p class="cpf__lead">
          برای تکمیل پروفایل، سه مدرک زیر را بارگذاری کنید.
        </p>

        <form class="cpf__form" @submit.prevent="submit">
          <SingleImageUploader
            upload-text="بارگذاری عکس جواز کسب"
            purpose="business-license"
            @done="(id: string) => (form.business_license_image_id = id)"
          />
          <SingleImageUploader
            upload-text="بارگذاری عکس سردر مغازه"
            purpose="shop-image"
            @done="(id: string) => (form.shop_image_id = id)"
          />
          <SingleImageUploader
            upload-text="بارگذاری عکس کارت ملی"
            purpose="national-card"
            @done="(id: string) => (form.ncode_image_id = id)"
          />

          <p v-if="error" class="cpf__error">{{ error }}</p>

          <button type="submit" class="cpf__submit" :disabled="submitting">
            بارگذاری اطلاعات
          </button>
        </form>
      </container>
    </Spinner>

    <DialogVantOneButton
      v-model:show="done"
      :time-out="-1"
      :close-on-click-overlay="false"
    >
      <template #title>
        <div class="cpf__dialogText">
          تکمیل اطلاعات شما با موفقیت انجام شد.
        </div>
      </template>
      <template #button>
        <div class="cpf__dialogBtn" @click="finish">متوجه شدم</div>
      </template>
    </DialogVantOneButton>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { showNotify } from 'vant'
import PageBar from '../../components/ui/PageBar.vue'
import Spinner from '../../components/Spinner.vue'
import DialogVantOneButton from '../../components/DialogVantOneButton.vue'
import SingleImageUploader from '../../components/upload/SingleImageUploader.vue'
import { api } from '../../api/client'

const router = useRouter()

const form = reactive({
  business_license_image_id: null as string | null,
  shop_image_id: null as string | null,
  ncode_image_id: null as string | null,
})

const submitting = ref(false)
const done = ref(false)
const error = ref<string | null>(null)

async function submit() {
  error.value = null

  // The reference checked all three client-side before posting
  // (completeProfile.vue:191-198); the server requires them too.
  if (!form.business_license_image_id || !form.shop_image_id || !form.ncode_image_id) {
    showNotify('لطفا تمامی عکس های خواسته شده را آپلود کنید')
    return
  }

  submitting.value = true
  try {
    await api.completeProfile({
      business_license_image_id: form.business_license_image_id,
      shop_image_id: form.shop_image_id,
      ncode_image_id: form.ncode_image_id,
    })
    done.value = true
  } catch {
    error.value = 'ثبت اطلاعات انجام نشد. دوباره تلاش کنید.'
  } finally {
    submitting.value = false
  }
}

/** The reference sent the user home after the dialog (:175-177). */
function finish() {
  done.value = false
  router.push({ name: 'home' })
}
</script>

<style scoped lang="less">
.cpf__body {
  padding-top: 90px;
  padding-bottom: 40px;
}

.cpf__lead {
  margin: 4px 0 18px;
  font-size: 13px;
  color: @inkMuted;
}

.cpf__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cpf__error {
  margin: 2px;
  font-size: 12.5px;
  color: #dc2626;
}

.cpf__submit {
  margin-top: 6px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: @ink;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.cpf__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.cpf__dialogText {
  padding: 20px;
  line-height: 1.9;
  text-align: justify;
  font-size: 14px;
}

.cpf__dialogBtn {
  text-align: center;
  cursor: pointer;
}
</style>