asan-service/components/profile/SelectAgentModal.vue

<template>
  <el-dialog title="انتخاب نمایندگی و ارسال فرم" :visible.sync="showModal">
    <div v-loading="fetchingAgents" class="terms">
      <h2>تعهدنامه:</h2>
      <p class="mb-5">
        کاربر محترم درخواست کننده خدمت با تایید این متن هرگونه ادعایی خارج از پروتکل های اعلامی این شرکت را از خود سلب
        مینماید و تشخیص و سنجش کارشناسان واحد خدمات پس از فروش آسان سرویس ملاک عمل خواهد بود .دریافت کننده خدمات با
        تایید این متن تصدیق مینماید موارد خارج از شمول گارانتی اعلامی توسط آسان سرویس را میپذیرد .در صورتیکه کالایی فاقد
        شرایط گارانتی باشد نخست جهت تعمیر به درخواست کننده خدمت در این سامانه اطلاع رسانی میگردد و در صورت عدم اعلام نظر
        توسط کاربر جهت ثبت درخواست تعمیر ،کالای مذکور به نشانی کاربر عودت خواهد گردید.
      </p>
      <h4>موارد خارج از شمول گارانتی :</h4>
      <ol>
        <li>
          <p>دستکاری توسط افراد غیر مجاز</p>
        </li>
        <li>
          <p>مغایرت محصول با پک و یا نداشتن پک</p>
        </li>
        <li>
          <p>شکستگی، ضربه خوردگی، آبخوردگی</p>
        </li>
        <li>
          <p>مخدوش بودن سریال کالا با کارت گارانتی و پکیج محصول</p>
        </li>
        <li>
          <p>کسورات لوازم جانبی و قطعات محصول در پک</p>
        </li>
      </ol>
      <div class="form form_2">
        <div class="formRow">
          <label for="accept">
            <input id="accept" v-model="termsOfUse" type="checkbox" />
            <span>قوانین را میپذیرم</span>
          </label>
        </div>

        <div class="formRow agents">
          <el-select
            v-model="agent"
            :disabled="!termsOfUse || user.isAgent"
            filterable
            placeholder="نماینگی نزدیک خودرا انتخاب کنید"
          >
            <el-option label="شرکت آسان سرویس (تهران)" value="main"></el-option>
            <el-option
              v-for="item in filteredAgents"
              :key="item._id"
              :label="agentName(item)"
              :title="agentName(item)"
              :value="item._id"
            >
            </el-option>
          </el-select>
          <el-button
            class="btn btn-primary custom-el-button"
            :disabled="!termsOfUse"
            :loading="postingForm"
            @click="sendForm"
          >
            ارسال
          </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'SelectAgentModal',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    draft: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      termsOfUse: false,
      fetchingAgents: true,
      postingForm: false,
      agents: [],
      agent: ''
    }
  },
  computed: {
    showModal: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('closeModal')
      }
    },
    user() {
      return this.$auth.user
    },
    userAddress() {
      const user = this.user
      return user.province_name + '، ' + user.city_name + '، ' + user.address + '،کد پستی: ' + user.postal_code
    },
    filteredAgents() {
      return this.agents.filter(item => {
        // Handle new representation_type format (array)
        if (Array.isArray(item.representation_type)) {
          if (item.representation_type.includes('both')) return true;
          if (this.draft.db_name === 'verity') {
            return (
              item.representation_type.includes('mobile_accessories') ||
              item.representation_type.includes('computer_accessories') ||
              item.representation_type.includes('memory_products') ||
              item.representation_type.includes('verity')
            )
          } else if (this.draft.db_name === 'panatech') {
            return (
              item.representation_type.includes('car_audio_video') || 
              item.representation_type.includes('home_products') || 
              item.representation_type.includes('panatech')
            )
          }
        }
        // Handle legacy data
        else if (this.draft.db_name === 'verity') {
          return item.representation_type === 'verity' || item.representation_type === 'both'
        } else if (this.draft.db_name === 'panatech') {
          return item.representation_type === 'panatech' || item.representation_type === 'both'
        }
        return false
      })
    }
  },
  watch: {
    show(newVal, oldVal) {
      if (newVal) {
        this.$axios
          .get('/api/public/agents')
          .then(res => {
            this.agents = res.data
            this.fetchingAgents = false
          })
          .catch(() => {
            this.$message({
              type: 'error',
              message: 'در دریافت لیست نمایندگان مشکلی پیش آمده'
            })
            this.showModal = false
          })
      }
    }
  },
  mounted() {
    if (this.user.isAgent) this.agent = 'main'
  },
  methods: {
    agentName(item) {
      return (
        'نمایندگی ' +
        item.city_name +
        ' کد ' +
        item.agent_code +
        ' ' +
        '(' +
        item.province_name +
        ', ' +
        item.city_name +
        ', ' +
        item.address +
        ')'
      )
    },
    sendForm() {
      // validations
      if (this.postingForm) return
      if (!this.termsOfUse)
        return this.$message({
          type: 'warning',
          message: 'با قوانین و مقررات موافقت نکرده اید.'
        })
      if (!this.agent)
        return this.$message({
          type: 'warning',
          message: 'نماینده مورد نظر را انتخاب کنید'
        })

      // set postingForm true
      this.postingForm = true

      const businessID = () => {
        if (this.draft.db_name === 'panatech') return this.user.panatech_businessID
        else if (this.draft.db_name === 'verity') return this.user.verity_businessID
        else return ''
      }

      const agent = () => {
        if (this.user.isAgent) return 'main'
        else return this.agent
      }

      const data = {
        BusinessID: businessID(),
        Description: this.draft.description,
        cAddress1: this.userAddress,
        TransCCustom1: this.user.first_name + ' ' + this.user.last_name,
        cTel1: this.user.mobile_number,
        items: this.draft.items,
        termsOfUse: this.termsOfUse,
        draftId: this.draft._id,
        db_name: this.draft.db_name,
        agent: agent()
      }

      this.$axios
        .post('/api/user/transaction', data)
        .then(res => {
          this.$message({
            type: 'success',
            message: 'فرم شما با موفقیت ارسال شد'
          })
          this.postingForm = false
          this.$router.push({
            name: 'account-guarantee-receipt',
            query: { ttn: res.data.transNumber, host: res.data.host, db_name: this.draft.db_name }
          })
        })
        .catch(e => {
          this.postingForm = false
          if (e.response.status === 422) {
            this.$message({
              type: 'error',
              message: 'اطلاعات را بررسی و دوباره تلاش کنید'
            })
          } else if (e.response.status === 406) {
            this.$message({
              type: 'error',
              message: e.response.data.message
            })
          } else {
            this.$arpaError()
            console.log(e)
          }
        })
    }
  }
}
</script>