palizvani-front-vite/src/components/Widgets/Other/Shop/ShopApplyDiscount/ShopApplyDiscount.vue

<template>
  <div class="apply-discount">
    <q-banner class="banner apply-discount-top-banner">
      {{ mainTitle }}
    </q-banner>
    <q-card class="apply-discount-steps-card">
      <div class="apply-discount-step">
        <svg xmlns="http://www.w3.org/2000/svg"
             width="17.053"
             height="19.866"
             viewBox="0 0 17.053 19.866">
          <g id="Paper"
             transform="translate(0 0)">
            <path id="Combined_Shape"
                  data-name="Combined Shape"
                  d="M4.475,19.866A4.585,4.585,0,0,1,0,15.188V4.491A4.606,4.606,0,0,1,4.57.012h6.271a.758.758,0,0,1,.265,0h.131a.755.755,0,0,1,.541.23l5.065,5.277a.753.753,0,0,1,.209.519V15.2A4.615,4.615,0,0,1,12.6,19.865H4.475ZM1.5,4.509V15.2a3.091,3.091,0,0,0,3.009,3.162h8.064a3.109,3.109,0,0,0,2.979-3.155V6.984h-2.01a3.332,3.332,0,0,1-3.318-3.325V1.512H4.572A3.089,3.089,0,0,0,1.5,4.509Zm10.224-.85a1.828,1.828,0,0,0,1.82,1.824H14.73L11.724,2.353ZM5.387,14.108a.75.75,0,0,1,0-1.5h5.4a.75.75,0,0,1,0,1.5Zm0-3.752a.75.75,0,0,1,0-1.5H8.743a.75.75,0,0,1,0,1.5Z"
                  transform="translate(0.001 0)"
                  fill="#5b7a5f" />
          </g>
        </svg>
        <span class="title">
          {{ step1Title }}
          <svg xmlns="http://www.w3.org/2000/svg"
               width="15"
               height="15"
               viewBox="0 0 15 15">
            <g id="Group_11510"
               data-name="Group 11510"
               transform="translate(-1215 -335)">
              <circle id="Ellipse_819"
                      data-name="Ellipse 819"
                      cx="7.5"
                      cy="7.5"
                      r="7.5"
                      transform="translate(1215 335)"
                      fill="#19cb99" />
              <path id="Path"
                    d="M8.615,1.5l-4.75,4.75a.881.881,0,0,1-1.23,0L.255,3.875A.877.877,0,0,1,1.5,2.635l1.75,1.75L7.375.255A.877.877,0,0,1,8.615,1.5"
                    transform="translate(1218 339)"
                    fill="#f6f6f6" />
            </g>
          </svg>
        </span>
      </div>
      <div class="apply-discount-step">
        <svg xmlns="http://www.w3.org/2000/svg"
             width="15.84"
             height="19.87"
             viewBox="0 0 15.84 19.87">
          <g id="Profile"
             transform="translate(0 0)">
            <path id="Combined_Shape"
                  data-name="Combined Shape"
                  d="M0,16.174c0-3.3,4.521-3.677,7.921-3.677,1.958,0,7.919,0,7.919,3.7,0,3.295-4.52,3.677-7.919,3.677C5.962,19.87,0,19.87,0,16.174Zm1.5,0c0,1.458,2.16,2.2,6.421,2.2s6.419-.733,6.419-2.177S12.18,14,7.921,14,1.5,14.729,1.5,16.174Zm6.389-5.555A5.31,5.31,0,0,1,7.921,0a5.31,5.31,0,0,1,0,10.619ZM4.038,5.31A3.873,3.873,0,0,0,7.892,9.192l.029.715V9.192A3.882,3.882,0,1,0,4.038,5.31Z"
                  transform="translate(0 0)"
                  fill="#bcbcbc" />
          </g>
        </svg>
        <span class="title">
          بازبینی
        </span>
      </div>
      <div v-if="showPayStage"
           class="apply-discount-step">
        <svg xmlns="http://www.w3.org/2000/svg"
             width="20.639"
             height="19.173"
             viewBox="0 0 20.639 19.173">
          <g id="Wallet"
             transform="translate(0)">
            <path id="Combined_Shape"
                  data-name="Combined Shape"
                  d="M6,19.173a6,6,0,0,1-6-6V6A6,6,0,0,1,6,0h8.645a6,6,0,0,1,6,6v7.178a6,6,0,0,1-6,6ZM1.5,6v7.178a4.5,4.5,0,0,0,4.5,4.5h8.645a4.5,4.5,0,0,0,4.5-4.5V12.9h-3.3a3.441,3.441,0,1,1,0-6.881h3.3V6a4.5,4.5,0,0,0-4.5-4.5H6A4.5,4.5,0,0,0,1.5,6ZM13.9,9.455a1.945,1.945,0,0,0,1.942,1.94h3.3V7.513h-3.3A1.946,1.946,0,0,0,13.9,9.455Zm2.088.688a.75.75,0,0,1,0-1.5H16.3a.75.75,0,0,1,0,1.5ZM5.286,6.038a.75.75,0,0,1,0-1.5h5.4a.75.75,0,1,1,0,1.5Z"
                  transform="translate(0 0)"
                  fill="#bcbcbc" />
          </g>
        </svg>
        <span class="title">
          پرداخت
        </span>
      </div>
    </q-card>

    <div class="step1">
      <div class="step1__cart-items">
        <div class="cart-item">
          <div class="cart-item__use-type">
            <q-icon :name="usageIcon" />
          </div>
          <div class="cart-item__thumbnail">
            <q-img :src="classroom.thumbnail" />
          </div>
          <div class="cart-item__info">
            <div class="cart-item__title">
              {{ classroom.title }}
            </div>
            <div class="cart-item__attrs">
              <div class="cart-item__attr">
                <div class="cart-item__attr-label">
                  نوع برگزاری:
                </div>
                <div class="cart-item__attr-value">
                  {{ getHoldingType(classroom.holding_type) }}
                </div>
              </div>
              <div class="cart-item__attr">
                <div class="cart-item__attr-label">
                  استاد:
                </div>
                <div class="cart-item__attr-value">
                  {{ classroom.professor_info.firstname }}
                  {{ classroom.professor_info.lastname }}
                </div>
              </div>
              <div class="cart-item__attr">
                <div class="cart-item__attr-label">
                  هزینه برگزاری:
                </div>
                <div class="cart-item__attr-value">
                  {{ classroom.price.toLocaleString('fa') }}
                  ریال
                </div>
              </div>
            </div>
            <div class="cart-item__price">
              <div class="cart-item__price-final" />
            </div>
          </div>
        </div>
        <discount v-if="showDiscountSection"
                  :target-id="classroom.id"
                  :target="getTarget"
                  @set-discount="setDiscount" />
      </div>
      <div class="step1__sidebar">
        <sidebar :price="classroom.price"
                 :order-price="orderPrice"
                 @complete="onComplete" />
      </div>
    </div>

  </div>
</template>

<script>
import { Invoice } from 'src/models/Invoice.js'
import { mixinAuth } from 'src/mixin/Mixins.js'
import ShamsiDate from 'src/assets/ShamsiDate.js'
import { APIGateway } from 'src/api/APIGateway.js'
import { Classroom } from 'src/models/Classroom.js'
import { AnswerBook } from 'src/models/AnswerBook.js'
import { FormBuilderAssist } from 'quasar-form-builder'
import Sidebar from 'components/Widgets/Store/Cart/components/step1/sidebar.vue'
import Discount from 'components/Widgets/Store/Cart/components/step1/discount.vue'

export default {
  name: 'ShopApplyDiscount',
  components: { Discount, Sidebar },
  mixins: [mixinAuth],
  data: () => ({
    mounted: false,
    inputDataLoaded: false,
    panel: 'userInfo',
    step: false,
    rulesAccept: false,
    rulesDialog: false,
    loading: true,
    classroom: new Classroom(),
    discountId: null,
    orderPrice: 0,
    invoice: new Invoice(),
    eventTestAnswerBook: new AnswerBook(),

    api: APIGateway.user.APIAdresses.current,
    entityIdKey: 'id',
    entityParamKey: 'id',
    showRouteName: 'UserPanel.ShopPaymentFromWallet',
    inputs: []
  }),
  computed: {
    mainTitle () {
      if (this.$route.query?.source === 'event') {
        return 'ثبت نام در رویداد'
      } else {
        return 'ثبت نام در دوره آموزشی'
      }
    },
    step1Title () {
      return 'تکمیل اطلاعات'
    },
    step2Title () {
      if (this.$route.query?.source === 'event') {
        return 'مشاهده جزییات و قوانین رویداد'
      } else {
        return 'مشاهده جزییات و قوانین دوره'
      }
    },
    getTarget () {
      if (this.$route.query?.source === 'event') {
        return 'EVENT'
      } else if (this.$route.query?.source === 'classroom') {
        return 'TRAINING'
      } else if (this.$route.query?.source === 'store') {
        return 'STORE'
      } else {
        return 'NAV'
      }
    },
    usageIcon () {
      return 'inventory_2'
    },
    showDiscountSection () {
      return this.$route.query?.type !== 'enrollment' && this.classroom.price !== 0
    },
    showPayStage () {
      return this.$route.query?.type !== 'enrollment'
    }
  },
  watch: {
  },
  mounted () {
    this.loadClassroomFromStore()
    this.orderPrice = this.classroom.price
    if (this.$route.query?.source === 'event') {
      this.getEventTest()
    }
    this.mounted = true

    this.$bus.on('event-confirmation-step-test-sent-answer-sending', () => {
    })
    this.$bus.on('event-confirmation-step-test-sent-answer-success', () => {
      this.successSentTest()
    })
    this.$bus.on('event-confirmation-step-test-sent-answer-failed', () => {
      this.sentTestFailed()
    })
  },
  methods: {
    onComplete () {
      if (this.$route.query?.type === 'register') {
        this.createInvoiceForClassroomOrRegisterEvent()
      } else if (this.$route.query?.type === 'enrollment') {
        this.enrollClassroom()
      } else {
        this.$router.push({ name: 'UserPanel.ShopPaymentFromWallet', query: this.$route.query })
      }
    },
    enrollClassroom () {
      // this.enrolmentLoading = true
      APIGateway.classroom.enrollByUser(this.classroom.id)
        .then(() => {
          this.$q.notify({
            message: 'پیش ثبت نام با موفقیت انجام شد.',
            type: 'positive'
          })
          // this.enrolmentLoading = false
          this.$router.push({ name: 'UserPanel.Profile.ClassroomInfo', params: { id: this.classroom.id } })
        })
        .catch(() => {
          // this.enrolmentLoading = false
        })
    },
    setDiscount (discount) {
      console.log(discount)
      if (!discount) {
        this.orderPrice = this.classroom.price
        this.discountId = null
      } else {
        this.orderPrice = discount.order_price
        this.discountId = discount.id
      }
    },
    getEventTest () {
      if (this.classroom.tests && this.classroom.tests.length === 0) {
        return
      }
      this.getEventTestAnswerBook(this.classroom.tests[0])
    },
    getEventTestAnswerBook (eventTestId) {
      this.eventTestAnswerBook.loading = true
      APIGateway.answerBook.getOrCreate(this.user.id, eventTestId)
        .then((answerBook) => {
          this.eventTestAnswerBook = new AnswerBook(answerBook)
          this.eventTestAnswerBook.loading = false
        })
        .catch(() => {
          this.eventTestAnswerBook.loading = false
        })
    },
    loadClassroomFromStore () {
      this.classroom = this.$store.getters['Shop/onRegisterClassroom']
    },
    sentTestFailed () {
      this.panel = 'userInfo'
    },
    successSentTest () {
      this.editEntity()
    },
    editEntity () {
      if (this.eventTestAnswerBook.id && this.panel !== 'eventTest') {
        this.panel = 'eventTest'
        return
      }
      this.panel = 'userInfo'
      this.$nextTick(() => {
        this.$refs.entityEdit.editEntity(false)
          .then(() => {
            if (this.$route.query?.type === 'register') {
              this.createInvoiceForClassroomOrRegisterEvent()
            } else {
              this.$router.push({ name: 'UserPanel.ShopPaymentFromWallet', query: this.$route.query })
            }
          })
          .catch(() => {})
      })
    },
    createInvoiceForClassroomOrRegisterEvent () {
      this.register()
        .then((data) => {
          if (data === 'Invoice') {
            this.$router.push({ name: 'UserPanel.ShopPaymentFromWallet', query: this.$route.query })
          }
        })
        .catch(() => {})
    },
    register () {
      return new Promise((resolve, reject) => {
        this.invoice.loading = true
        APIGateway.classroom.register(this.classroom.id, { discount_id: this.discountId })
          .then((data) => {
            if (data.type === 'Invoice') {
              this.invoice = new Invoice(data.model)
              this.invoice.loading = false
              this.$store.commit('Shop/updateRegisterClassroomInvoice', this.invoice)
              this.$q.notify({
                message: 'صورت حساب شما ایجاد شد، برای ثبت نام اقدام فرمایید.',
                type: 'info'
              })
              resolve('Invoice')
            } else if (data.type === 'Registration') {
              this.$q.notify({
                message: 'ثبت نام شما با موفقیت انجام شد.',
                type: 'positive'
              })
              const eventRegistrationId = data.model.classroom_info.id
              if (this.$route.query?.source === 'event') {
                this.$router.push({ name: 'UserPanel.Profile.EventInfo', params: { id: eventRegistrationId } })
              } else {
                this.$router.push({ name: 'UserPanel.Profile.ClassroomInfo', params: { id: eventRegistrationId } })
              }
            }
          })
          .catch(() => {
            this.invoice.loading = false
            reject()
          })
      })
    },
    createInvoice () {
      return new Promise((resolve, reject) => {
        this.invoice.loading = true
        APIGateway.classroom.createInvoice(this.classroom.id)
          .then((invoice) => {
            this.invoice = new Invoice(invoice)
            this.invoice.loading = false
            this.$store.commit('Shop/updateRegisterClassroomInvoice', this.invoice)
            this.$q.notify({
              message: 'صورت حساب شما ایجاد شد، برای ثبت نام اقدام فرمایید.',
              type: 'info'
            })
            resolve(this.invoice)
          })
          .catch(() => {
            this.invoice.loading = false
            reject()
          })
      })
    },
    afterLoadInputData () {
      this.checkNationalCode()
      this.$nextTick(() => {
        this.inputDataLoaded = true
      })
    },
    checkNationalCode () {
      if (FormBuilderAssist.getInputsByName(this.inputs, 'national_code')?.value) {
        FormBuilderAssist.setAttributeByName(this.inputs, 'national_code', 'readonly', true)
      }
    },
    openRulesDialog () {
      this.rulesDialog = true
    },
    getHoldingType (type) {
      const target = (new Classroom()).holding_typeEnums.find(item => item.value === type)
      if (target) {
        return target.label
      }
      return '-'
    },
    getTime (time) {
      return ShamsiDate.getDateTime(time)
    },
    getTerm (classroom) {
      if (!classroom.beginning_registration_period) {
        return '-'
      }
      return ShamsiDate.getTerm(classroom.beginning_registration_period)
    }
  }
}
</script>

<style scoped lang="scss">
.apply-discount {
  .apply-discount-top-banner {
    margin-top: 50px;
    margin-bottom: 42px;
  }
  .apply-discount-steps-card {
    background-color: #F5F5F5;
    padding: 35px 0;
    border-radius: 8px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    margin-bottom: 44px;
    .apply-discount-step {
      display: flex;
      flex-flow: row;
      position: relative;
      width: 20%;
      &:first-child {
        .title {
          color: #5B7A5F;
        }
      }
      &:after {
        content: ' ';
        position: absolute;
        left: 0;
        top: 10px;
        width: 95%;
        border-top: dotted 2px #5B7A5F;
        z-index: 1;
      }
      &:last-child {
        &:after {
          width: 0;
        }
        .title {
          color: #BCBCBC;
        }
      }
      .title {
        position: relative;
        background-color: #F5F5F5;
        z-index: 2;
        padding-right: 20px;
      }
      svg {
        width: 17px;
        position: relative;
        background-color: #F5F5F5;
        z-index: 2;
        padding-right: 8px;
      }
    }
  }
  .apply-discount-form-banner {
    margin-bottom: 26px;
  }
  .apply-discount-form-card {
    background-color: #F5F5F5;
    padding: 50px 30px;
    border-radius: 8px;
    &:deep {
      .q-card.entity-edit {
        background: transparent;
        .q-toolbar,
        & > .q-separator {
          display: none;
        }
      }
    }
  }
  :deep(.panels) {
    background: transparent;
  }
  .section-edit-btn {
    margin-top: 50px;
    margin-bottom: 77px;
  }

  .step1 {
  $gap: 28px;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  gap: $gap;
  $sidebar-width: 312px;
  .step1__cart-items {
    width: calc( 100% - #{$sidebar-width} - #{28px} );
    display: flex;
    flex-flow: column;
    gap: 24px;
    @media screen and (max-width: 1024px) {
      & {
        width: 100%;
      }
    }

    .cart-item {
      $cart-background-color: #F9F9FB;
      $cart-item__thumbnail-width: 192px;
      position: relative;
      background: $cart-background-color;
      border: 1px solid #DFE1EC;
      border-radius: 8px;
      padding: 24px 22px 24px 67px;
      display: flex;
      flex-flow: row;
      flex-wrap: wrap;
      $gap: 30px;
      gap: $gap;
      min-height: 203px;

      .cart-item__use-type {
        $cart-item__use-type-width: 37px;
        position: absolute;
        top: 0;
        left: 16px;
        width: $cart-item__use-type-width;
        color: white;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 22px;
        background: $primary;

        &:after {
          position: absolute;
          content: ' ';
          bottom: calc((#{$cart-item__use-type-width} * -1 / 2) - 9px);
          left: 0;
          transform: rotate(45deg);
          background: $cart-background-color;
          width: $cart-item__use-type-width;
          height: $cart-item__use-type-width;
          border-radius: 2px;
        }
      }

      .cart-item__remove-action {
        position: absolute;
        top: 85px;
        left: 20px;

        .q-btn {
          width: 32px;
          height: 32px;
        }

        @media screen and (max-width: 600px) {
          & {
            top: 4px;
            left: auto;
            right: 4px;
          }
        }
      }

      .cart-item__thumbnail {
        width: $cart-item__thumbnail-width;
        @media screen and (max-width: 600px) {
          & {
            width: 100%;
          }
        }
      }

      .cart-item__info {
        width: calc(100% - #{$cart-item__thumbnail-width} - #{$gap});
        color: #212121;

        .cart-item__title {
          font-size: 22px;
          margin-bottom: 27px;
        }

        .cart-item__attrs {
          display: flex;
          flex-flow: column;
          gap: 16px;
          //flex-wrap: nowrap;
          margin-bottom: 70px;

          .cart-item__attr {
            display: flex;
            flex-flow: row;
            gap: 5px;
            //flex-wrap: nowrap;

            .cart-item__attr-label {
              font-size: 16px;
              color: #797979;

              &:before {
                display: inline-block;
                content: ' ';
                width: 8px;
                height: 8px;
                background: #475F4A;
                border-radius: 100%;
                margin-right: 4px;
              }
            }

            .cart-item__attr-value {
              font-size: 16px;
            }
          }

          @media screen and (max-width: 1200px) {
            & {
              flex-flow: column;
              gap: 8px;
              margin-bottom: 8px;
            }
          }
        }

        .cart-item__type-info {
          position: absolute;
          top: 30px;
          right: 22px;
          display: flex;
          flex-flow: row;
          align-items: center;
          justify-content: space-between;
          gap: 2px;
          padding: 0 4px 0 16px;
          background: #FFFFFF;
          border: 1px solid #DFE1EC;
          border-radius: 20px;
          color: #212121;
          font-size: 16px;
        }

        .cart-item__count-action {
          position: absolute;
          right: 20px;
          top: 65px;
          width: 120px;
          @media screen and (max-width: 1200px) {
            & {
              position: relative;
              top: 0;
              right: 0;
              width: 100%;
            }
          }
        }

        .cart-item__price {
          position: absolute;
          top: 136px;
          right: 20px;
          display: flex;
          flex-flow: row;
          align-items: center;
          justify-content: space-between;
          gap: 19px;

          .cart-item__price-base {
            color: #FF3D3D;
            font-size: 18px;
            text-decoration: line-through;
          }

          .cart-item__price-final {
            color: $primary;
            font-size: 24px;
          }

          @media screen and (max-width: 1200px) {
            & {
              position: relative;
              top: 0;
              right: 0;
              width: 100%;
              margin-bottom: 8px;
            }
          }
        }

        .cart-item__products {
          display: flex;
          flex-flow: row;
          flex-wrap: wrap;

          .cart-item__product {
            width: 33.33%;
            margin-bottom: 17px;

            &:before {
              display: inline-block;
              content: ' ';
              width: 8px;
              height: 8px;
              background: #475F4A;
              border-radius: 100%;
              margin-right: 4px;
            }
          }
        }

        @media screen and (max-width: 800px) {
          & {
            width: 100%;
          }
        }
      }

      @media screen and (max-width: 600px) {
        & {
          padding: 56px 22px 24px 24px;
        }
      }
    }
  }
  .step1__sidebar {
    width: $sidebar-width;
    @media screen and (max-width: 1024px) {
      & {
        width: 100%;
      }
    }
  }
}
}
</style>