Merge branch 'refactor/separate-vue' of ssh://192.168.0.10:29418/pcalife/PA...

Tomas

2021-12-09 ac235850a9287dae6977c964213176fa7c86b140

 PAMapp/pages/questionnaire/questionnaire.component.ts

@@ -1,228 +1,326 @@
import { Vue, Component } from 'nuxt-property-decorator';
import { addFavoriteConsultant, appointmentDemand, AppointmentParams, AppointmentRequests ,RegisterInfo } from '~/assets/ts/api/consultant';
import { getRequestsFromStorage, setRequestsToStorage, getRequestQuestionFromStorage, removeRequestQuestionFromStorage  } from '~/assets/ts/storageRequests';
import { Gender } from '~/assets/ts/models/enum/gender.enum';
import { ContactType } from '~/assets/ts/models/enum/ContactType';
import { Vue, Component, State, Action, Watch } from 'nuxt-property-decorator';
import { addFavoriteConsultant, appointmentDemand, AppointmentParams, AppointmentRequests ,editAppointment,RegisterInfo } from '~/assets/ts/api/consultant';
import { getRequestQuestionFromStorage, getRequestsFromStorage, removeRequestQuestionFromStorage, setRequestsToStorage } from '~/assets/ts/storageRequests';
import _ from 'lodash';
import { isLogin } from '~/assets/ts/auth';
import { Consultant } from '~/assets/ts/models/consultant.model';
import { ContactType } from '~/assets/ts/models/enum/ContactType';
import { Gender } from '~/assets/ts/models/enum/gender.enum';

@Component
export default class Questionnaire extends Vue {
  genderOptions=[
    {
      title:'男性',
      label:Gender.MALE,
    },
    {
      title:'女性',
      label:Gender.FEMALE,
    }
  ];
  @Component
  export default class Questionnaire extends Vue {
    @State('myConsultantList') myConsultantList!: Consultant[];
    @Action storeConsultantList!: () => Promise<number>;

  requirementOptions=[
    {
      title:'健康與保障',
      label:'健康與保障',
    },
    {
      title:'子女教育',
      label:'子女教育',
    },
    {
      title:'資產規劃',
      label:'資產規劃',
    },
    {
      title:'樂活退休',
      label:'樂活退休',
    },
    {
      title:'保單健檢/規劃',
      label:'保單健檢/規劃',
    },
    {
      title:'分紅保單',
      label:'分紅保單',
    },
  ];

  ageRangeOptions=[
    {
      title:'20歲以下',
      label:'under_20',
    },
    {
      title:'21-30 歲',
      label:'21-30'
    },
    {
      title:'31-40 歲',
      label:'31-40'
    },
    {
      title:'41-50 歲',
      label:'41-50'
    },
    {
      title:'46-55 歲',
      label:'46-55',
    },
    {
      title:'51-60 歲',
      label:'51-60',
    },
    {
      title:'61-70 歲',
      label:'61-70',
    },
    {
      title:'71 歲以上',
      label:'over_71',
    }
  ];

  quesAboutList = [
                {
                    title:'健康與保障',
                    content:'唯有把身體照顧好，才是保障幸福之本，不做盲目燃燒的蠟燭，只做綻開的陽光，陪孩子多走一哩路，人生的美正要開展。'
                },
                {
                    title:'子女教育',
                    content:'孩子，我們是雙方的導師也是學生，面對未來要並肩作戰，學會勇敢無畏、克服挫折、善於理財，這條路上我們一起學。'
                },
                {
                    title:'資產規劃',
                    content:'真正的財富來自嚴謹規劃資產傳承，為人生蓋一堵抵禦財務風險的牆，確保資產穩健成長，替全家族的未來做好萬全準備。'
                },
                {
                    title:'樂活退休',
                    content:'拼一輩子，退休後的日子要輕鬆快活，就得提早透過保險商品規劃退休財務，替自己創造穩定收入，為精彩的熟年人生揭開序幕。'
                },
                {
                    title:'保單健檢/規劃',
                    content:'全面檢視自己的保障結構是否符合現在或未來的風險移轉需求。'
                },
                {
                    title:'分紅保單',
                    content:'分紅保單 分紅保單是兼具「分攤風險」與「紅利共享」特色的保單，具有一定穩定度，讓你可以同時享有壽險保障及紅利！'
                }
  ];

  myRequest: AppointmentRequests = {
    phone          : this.userInfo?.phone ? this.userInfo.phone                               : '',
    email          : this.userInfo?.email ? this.userInfo.email                               : '',
    contactType    : _.isEqual(this.userInfo?.contactType,ContactType.SMS) ? ContactType.PHONE: ContactType.EMAIL,
    gender         : '',
    age            : '',
    job            : '',
    requirement    : [],
    hopeContactTime: [{
      selectWeekOptions : [],
      selectTimesOptions: [],
    }],
    agentNo: '',
  };

  showDrawer= false;
  sendReserve = false;

  beforeRouteEnter(to: any, from: any, next: any) {
    next(vm => {
      if (from.name === 'login' && !isLogin()) {
        vm.$router.go(-1);
        return;
    genderOptions=[
      {
        title:'男性',
        label:Gender.MALE,
      },
      {
        title:'女性',
        label:Gender.FEMALE,
      }
    ];

      if (!isLogin()) {
        vm.$router.push('/login');
    requirementOptions=[
      {
        title:'健康與保障',
        label:'健康與保障',
      },
      {
        title:'子女教育',
        label:'子女教育',
      },
      {
        title:'資產規劃',
        label:'資產規劃',
      },
      {
        title:'樂活退休',
        label:'樂活退休',
      },
      {
        title:'保單健檢/規劃',
        label:'保單健檢/規劃',
      },
      {
        title:'分紅保單',
        label:'分紅保單',
      },
    ];

    ageRangeOptions=[
      {
        title:'20歲以下',
        label:'under_20',
      },
      {
        title:'21-30 歲',
        label:'21-30'
      },
      {
        title:'31-40 歲',
        label:'31-40'
      },
      {
        title:'41-50 歲',
        label:'41-50'
      },
      {
        title:'51-60 歲',
        label:'51-60',
      },
      {
        title:'61-70 歲',
        label:'61-70',
      },
      {
        title:'71 歲以上',
        label:'over_71',
      }
    })
  }
    ];

  mounted(): void {
    this.setMyRequest();
  }
    quesAboutList = [
                  {
                      title:'健康與保障',
                      content:'唯有把身體照顧好，才是保障幸福之本，不做盲目燃燒的蠟燭，只做綻開的陽光，陪孩子多走一哩路，人生的美正要開展。'
                  },
                  {
                      title:'子女教育',
                      content:'孩子，我們是雙方的導師也是學生，面對未來要並肩作戰，學會勇敢無畏、克服挫折、善於理財，這條路上我們一起學。'
                  },
                  {
                      title:'資產規劃',
                      content:'真正的財富來自嚴謹規劃資產傳承，為人生蓋一堵抵禦財務風險的牆，確保資產穩健成長，替全家族的未來做好萬全準備。'
                  },
                  {
                      title:'樂活退休',
                      content:'拼一輩子，退休後的日子要輕鬆快活，就得提早透過保險商品規劃退休財務，替自己創造穩定收入，為精彩的熟年人生揭開序幕。'
                  },
                  {
                      title:'保單健檢/規劃',
                      content:'全面檢視自己的保障結構是否符合現在或未來的風險移轉需求。'
                  },
                  {
                      title:'分紅保單',
                      content:'分紅保單 分紅保單是兼具「分攤風險」與「紅利共享」特色的保單，具有一定穩定度，讓你可以同時享有壽險保障及紅利！'
                  }
    ];

  private setMyRequest(): void {
    const storageMyRequest = getRequestsFromStorage();
    const storageMyQuestion = getRequestQuestionFromStorage();
    myRequest: AppointmentRequests = {
      phone          : this.userInfo?.phone ? this.userInfo.phone                               : '',
      email          : this.userInfo?.email ? this.userInfo.email                               : '',
      contactType    : _.isEqual(this.userInfo?.contactType,ContactType.SMS) ? ContactType.PHONE: ContactType.EMAIL,
      gender         : '',
      age            : '',
      job            : '',
      requirement    : [],
      hopeContactTime: [{
        selectWeekOptions : [],
        selectTimesOptions: [],
      }],
      agentNo: '',
    };

    if (storageMyRequest) {
      this.myRequest = {
        ...storageMyRequest,
        hopeContactTime: storageMyRequest.hopeContactTime?.length
                          ? storageMyRequest.hopeContactTime
                          : [{
                              selectWeekOptions: [],
                              selectTimesOptions: [],
                            }],
    showDrawer= false;
    sendReserve = false;
    isEditPopup = false;
    isEditBtn = false;

    appointmentId = 0;

    beforeRouteEnter(to: any, from: any, next: any) {
      next(vm => {
        if (from.name === 'login' && !isLogin()) {
          vm.$router.go(-1);
          return;
        }

        if (!isLogin()) {
          vm.$router.push('/login');
        }
      })
    }

    async fetch() {
      if (isLogin()) {
        await this.storeConsultantList();
      };
    }

    if (storageMyQuestion) {
      this.myRequest = {
        ...this.myRequest,
        requirement: storageMyQuestion
      }
      removeRequestQuestionFromStorage();
    mounted(): void {
      this.setMyRequest();
    }
  }

  get phoneValid(): boolean {
    const rule = /^09[0-9]{8}$/;
    return this.myRequest.phone
          ? rule.test(this.myRequest.phone) && _.isEqual(this.myRequest.phone.length,10)
          : true;
  }
    private setMyRequest(): void {
      const storageMyRequest = getRequestsFromStorage();
      const storageMyQuestion = getRequestQuestionFromStorage();

  get userInfo(): RegisterInfo {
    const initUserInfo = JSON.parse(localStorage.getItem('userInfo')!);
    return initUserInfo;
  }
      if (storageMyRequest) {
        this.myRequest = {
          ...storageMyRequest,
          hopeContactTime: storageMyRequest.hopeContactTime?.length
                            ? storageMyRequest.hopeContactTime
                            : [{
                                selectWeekOptions: [],
                                selectTimesOptions: [],
                              }],
        };
      }

  get isDisabledSubmitBtn(): boolean {
         return _.includes(this.myRequest.contactType,ContactType.PHONE)
    ? !this.isHopeContactTimeDone()
    : !this.phoneValid;
  }
      if (storageMyQuestion) {
        this.myRequest = {
          ...this.myRequest,
          requirement: storageMyQuestion
        }
        removeRequestQuestionFromStorage();
      }
    }

  get isLogin() {
    return isLogin();
  }
    get phoneValid(): boolean {
      const rule = /^09[0-9]{8}$/;
      return this.myRequest.phone
            ? rule.test(this.myRequest.phone) && _.isEqual(this.myRequest.phone.length,10)
            : true;
    }

  private isHopeContactTimeDone():boolean{
    return this.myRequest.hopeContactTime[0]?.selectWeekOptions.length >0 && this.myRequest.hopeContactTime[0]?.selectTimesOptions.length >0;
  }
    get userInfo(): RegisterInfo {
      const initUserInfo = JSON.parse(localStorage.getItem('userInfo')!);
      return initUserInfo;
    }

  sentDemand() {
    addFavoriteConsultant([this.$route.params.agentNo]).then(res => this.sentAppointmentDemand());
  }
    get isDisabledSubmitBtn(): boolean {
           return _.includes(this.myRequest.contactType,ContactType.PHONE)
      ? !this.isHopeContactTimeDone()
      : !this.phoneValid;
    }

  private sentAppointmentDemand() {
      const data: AppointmentParams = {
        ...this.myRequest,
        requirement: _.map(this.myRequest.requirement,o=>o).toString(),
        hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
        agentNo: this.$route.params.agentNo
      };
    get isLogin() {
      return isLogin();
    }

      appointmentDemand(data).then(res => {
    private isHopeContactTimeDone():boolean{
      return this.myRequest.hopeContactTime[0]?.selectWeekOptions.length >0 && this.myRequest.hopeContactTime[0]?.selectTimesOptions.length >0;
    }

    sentDemand() {
      if (this.isEditBtn) {
        this.sentEditAppointmentDemand();
      } else {
        addFavoriteConsultant([this.$route.params.agentNo]).then(res => this.sentAppointmentDemand());
      }

    }

    private sentAppointmentDemand() {
        const data: AppointmentParams = {
          ...this.myRequest,
          requirement: _.map(this.myRequest.requirement,o=>o).toString(),
          hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
          agentNo: this.$route.params.agentNo
        };

        appointmentDemand(data).then(res => {
            this.sendReserve = true;
            this.myRequest.hopeContactTime = [];
            setRequestsToStorage(this.myRequest);
        });
    }

    private sentEditAppointmentDemand() {
      const info = {
          ...this.myRequest,
          requirement: _.map(this.myRequest.requirement,o=>o).toString(),
          hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
          id: this.appointmentId,
          otherRequirement: null
        }
        editAppointment(info).then(res => {
          this.sendReserve = true;
          this.myRequest.hopeContactTime = [];
          setRequestsToStorage(this.myRequest);
      });
  }
        });
    }

  getHopeContactTime() {
      const selectedHopeContactTime = this.myRequest.hopeContactTime.filter((i) => i.selectWeekOptions?.length && i.selectTimesOptions?.length);
      return selectedHopeContactTime.map(i => {
          return `'${i.selectWeekOptions}、${i.selectTimesOptions}'`}
      ).toString();
  }
    getHopeContactTime() {
        const selectedHopeContactTime = this.myRequest.hopeContactTime.filter((i) => i.selectWeekOptions?.length && i.selectTimesOptions?.length);
        return selectedHopeContactTime.map(i => {
            return `'${i.selectWeekOptions}、${i.selectTimesOptions}'`}
        ).toString();
    }

  closeReservePopUp() {
      this.sendReserve = false;
      this.$router.push('/')
  }
    closeReservePopUp() {
        this.sendReserve = false;
        this.$router.push('/')
    }

}
    private getLatestReserved(agentNo) {
      const agentInfo = this.myConsultantList.filter(item => item.agentNo === agentNo);

      const appointmentInfo = agentInfo.length > 0 && agentInfo[0].appointments
        ? agentInfo[0].appointments!
              .filter((appointment) => appointment.communicateStatus !== 'contacted')
              .map((reversedAppointment) => {
                return {
                  ...reversedAppointment,
                  sortDate: new Date(reversedAppointment.appointmentDate)
                }
              })
              .sort((preAppointment, nextAppointment) => +nextAppointment.sortDate - +preAppointment.sortDate)[0]
        : null;
      return this.getReservedData(appointmentInfo);
    }

    private getReservedData(appointmentInfo) {
      if (appointmentInfo) {
        const hopeContactTime = appointmentInfo!.hopeContactTime.split("'")
              .filter(item => item && item !== ',');
        this.appointmentId = appointmentInfo.id;
        return {
            age: appointmentInfo.age,
            agentNo: appointmentInfo.agentNo,
            contactType: appointmentInfo.contactType,
            email: appointmentInfo.email || '',
            gender: appointmentInfo.gender,
            hopeContactTime: hopeContactTime.map(item => {
                const info = item.split('、');
                return {
                    selectWeekOptions: info[0].split(','),
                    selectTimesOptions: info[1].split(',')
                }
            }),
            job: appointmentInfo.job,
            phone: appointmentInfo.phone || '',
            requirement: appointmentInfo.requirement.split(',')
          }
      } else {
        return {
          age: '',
          agentNo: '',
          contactType: '',
          email: '',
          gender: '',
          hopeContactTime: [],
          job: '',
          phone: '',
          requirement: []
        }
      }
    }

    @Watch('myConsultantList') onMyConsultantListChange() {
      if (this.isLogin && this.myConsultantList.length > 0) {
          const editAppointment = this.getLatestReserved(this.$route.params.agentNo);

          if (editAppointment.agentNo) {
            this.myRequest = JSON.parse(JSON.stringify(editAppointment));
            if (!this.$route.query || this.$route.query.edit !== 'true') {
              this.isEditPopup = true;
            }
            this.isEditBtn = true;
            return;
          }
      }
    }
  }