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

<template>
  <div class="complete-info">
    <q-banner class="banner complete-info-top-banner">
      {{ mainTitle }}
    </q-banner>
    <q-card class="complete-info-steps-card">
      <div class="complete-info-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="complete-info-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="#212121" />
          </g>
        </svg>
        <span class="title">
          تکمیل اطلاعات
          <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="complete-info-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="#212121" />
          </g>
        </svg>
        <span class="title">
          پرداخت
        </span>
      </div>
    </q-card>

    <div v-if="isRegisterPage"
         class="info-column">
      <q-skeleton v-if="invoice.loading"
                  height="200px"
                  width="100%"
                  square />
      <invoice-info v-if="!invoice.loading"
                    :invoice="invoice"
                    :classroom="classroom"
                    class="invoice-info" />
      <invoice-payment-card v-if="!invoice.loading"
                            :wallet="wallet"
                            :invoice="invoice"
                            class="payment-card"
                            @onCancel="onCancel"
                            @onAccept="onAccept" />
    </div>

    <div v-if="isEnrollmentPage"
         class="text-center">
      <q-btn color="primary"
             :loading="enrolmentLoading"
             @click="enrollClassroom">
        تایید و پیش ثبت نام
      </q-btn>
    </div>

    <template v-if="false">
      <q-banner class="banner complete-info-pay-banner">
        پرداخت
      </q-banner>
      <q-card class="complete-info-pay-form-card">
        <q-card-section>
          <div class="complete-info-pay-form-card-title">
            مبلغ قابل پرداخت:
          </div>
          <q-card>
            <q-card-section v-if="classroom"
                            class="product-item">
              <div class="product-item-title">
                <div class="product-item-icon">
                  <svg xmlns="http://www.w3.org/2000/svg"
                       width="23.771"
                       height="16.991"
                       viewBox="0 0 23.771 16.991">
                    <path id="import_contacts_FILL0_wght400_GRAD0_opsz48"
                          d="M7.618,21.506a11.7,11.7,0,0,1,2.823.338,12.529,12.529,0,0,1,2.688,1.013V11.322A10.276,10.276,0,0,0,10.5,10.066a9.542,9.542,0,0,0-2.877-.446,7.957,7.957,0,0,0-2.012.257,19.465,19.465,0,0,0-1.985.635h0V22.235h0a7.623,7.623,0,0,1,1.9-.554A12.88,12.88,0,0,1,7.618,21.506Zm7.131,1.351A13.593,13.593,0,0,1,17.4,21.844a10.9,10.9,0,0,1,2.755-.338,14.467,14.467,0,0,1,2.12.162,10.571,10.571,0,0,1,1.877.432h0V10.512h0A8.027,8.027,0,0,0,22.2,9.837a9.94,9.94,0,0,0-2.053-.216,9.031,9.031,0,0,0-2.823.446,10.525,10.525,0,0,0-2.58,1.256Zm-.81,2.134a1.745,1.745,0,0,1-.392-.041.766.766,0,0,1-.311-.149,11.392,11.392,0,0,0-2.7-1.216,10.041,10.041,0,0,0-2.917-.432,7.778,7.778,0,0,0-1.945.243,19.068,19.068,0,0,0-1.891.594,1.157,1.157,0,0,1-1.2-.081A1.214,1.214,0,0,1,2,22.83V10.323a1.494,1.494,0,0,1,.189-.743,1.29,1.29,0,0,1,.567-.527,10.442,10.442,0,0,1,2.364-.8A12.192,12.192,0,0,1,7.618,8a11.986,11.986,0,0,1,3.309.459,10.558,10.558,0,0,1,3.012,1.4,10.255,10.255,0,0,1,2.958-1.4A11.6,11.6,0,0,1,20.152,8a12,12,0,0,1,2.485.257,10.487,10.487,0,0,1,2.35.8,1.376,1.376,0,0,1,.581.527,1.417,1.417,0,0,1,.2.743V22.83a1.28,1.28,0,0,1-.608,1.148,1.035,1.035,0,0,1-1.2.014,12.862,12.862,0,0,0-1.864-.608,8.211,8.211,0,0,0-1.945-.23,9.683,9.683,0,0,0-2.863.432A11.018,11.018,0,0,0,14.642,24.8a.766.766,0,0,1-.311.149A1.745,1.745,0,0,1,13.939,24.991ZM8.375,16.4Z"
                          transform="translate(-2 -8)"
                          fill="#475f4a" />
                  </svg>
                </div>
                {{ classroom.title }}
                {{ classroom.unit_info.title }}
                ویژه
                {{ getAudienceGenderType(classroom.audience_gender_type) }}
                به صورت
                {{ getHoldingType(classroom.holding_type) }}
                {{ getTerm(classroom) }}
              </div>
              <div class="product-item-price">
                <svg xmlns="http://www.w3.org/2000/svg"
                     width="22"
                     height="16"
                     viewBox="0 0 22 16">
                  <g id="Group_11468"
                     data-name="Group 11468"
                     transform="translate(240 -290) rotate(90)">
                    <g id="Rectangle_2935"
                       data-name="Rectangle 2935"
                       transform="translate(290 218)"
                       fill="none"
                       stroke="#aaa095"
                       stroke-width="1.5">
                      <rect width="16"
                            height="22"
                            rx="5"
                            stroke="none" />
                      <rect x="0.75"
                            y="0.75"
                            width="14.5"
                            height="20.5"
                            rx="4.25"
                            fill="none" />
                    </g>
                    <line id="Line_737"
                          data-name="Line 737"
                          y1="2"
                          transform="translate(294 233.5)"
                          fill="none"
                          stroke="#aaa095"
                          stroke-linecap="round"
                          stroke-width="2" />
                    <line id="Line_738"
                          data-name="Line 738"
                          y1="2"
                          transform="translate(302 222.5)"
                          fill="none"
                          stroke="#aaa095"
                          stroke-linecap="round"
                          stroke-width="2" />
                    <g id="Ellipse_892"
                       data-name="Ellipse 892"
                       transform="translate(295 226)"
                       fill="#fff"
                       stroke="#aaa095"
                       stroke-width="1.5">
                      <circle cx="3"
                              cy="3"
                              r="3"
                              stroke="none" />
                      <circle cx="3"
                              cy="3"
                              r="2.25"
                              fill="none" />
                    </g>
                  </g>
                </svg>
                {{ classroom.price }}
                ریال
              </div>
            </q-card-section>
          </q-card>
        </q-card-section>
      </q-card>
      <div class="flex justify-end section-edit-btn">
        <q-btn color="primary"
               @click="register">
          تایید و ادامه
          <svg xmlns="http://www.w3.org/2000/svg"
               width="18.387"
               height="11.502"
               viewBox="0 0 18.387 11.502">
            <path id="Combined_Shape"
                  data-name="Combined Shape"
                  d="M-9.338,11.408a.748.748,0,0,0,.388-.656V6.5h8.2A.751.751,0,0,0,0,5.75.75.75,0,0,0-.75,5h-8.2V.75A.751.751,0,0,0-9.338.093.769.769,0,0,0-9.7,0a.735.735,0,0,0-.4.115l-7.938,5a.747.747,0,0,0-.35.635.742.742,0,0,0,.35.634l7.938,5a.751.751,0,0,0,.4.116A.746.746,0,0,0-9.338,11.408ZM-10.45,9.392l-5.78-3.641,5.78-3.642Z"
                  transform="translate(18.387)"
                  fill="#fff" />
          </svg>
        </q-btn>
      </div>
    </template>

  </div>
</template>

<script>
import { User } from 'src/models/User.js'
import Enums from 'src/assets/Enums/Enums.js'
import { Wallet } from 'src/models/Wallet.js'
import { Invoice } from 'src/models/Invoice.js'
// import API_ADDRESS from 'src/api/Addresses.js'
import ShamsiDate from 'src/assets/ShamsiDate.js'
import { APIGateway } from 'src/api/APIGateway.js'
import { Classroom } from 'src/models/Classroom.js'
import InvoiceInfo from './components/InvoiceInfo.vue'
import InvoicePaymentCard from 'src/components/InvoicePaymentCard/InvoicePaymentCard.vue'

export default {
  name: 'PaymentFromWallet',
  components: { InvoiceInfo, InvoicePaymentCard },
  data: () => ({
    step: false,
    enrolmentLoading: false,
    user: new User(),
    wallet: new Wallet(),
    invoice: new Invoice(),
    classroom: new Classroom(),
    rulesAccept: false,
    rulesDialog: false,
    loading: true
  }),
  computed: {
    mainTitle () {
      if (this.$route.query.source === 'event') {
        return 'ثبت نام در رویداد'
      } else {
        return 'ثبت نام در دوره آموزشی'
      }
    },
    step1Title () {
      if (this.$route.query.source === 'event') {
        return 'مشاهده جزییات و قوانین رویداد'
      } else {
        return 'مشاهده جزییات و قوانین دوره'
      }
    },
    isRegisterPage () {
      return this.$route.query.type === 'register'
    },
    isEnrollmentPage () {
      return this.$route.query.type === 'enrollment'
    }
  },
  mounted () {
    this.loadAuthData()
    this.loadClassroomFromStore()
    this.checkStoreClassroom()
    this.getInvoiceFromStore()
    this.getMyWallet()
  },
  methods: {
    enrollClassroom () {
      this.enrolmentLoading = true
      APIGateway.classroom.enrollByUser(this.classroom.id)
        .then(() => {
          this.enrolmentLoading = false
          this.$route.push({ name: 'UserPanel.Profile.ClassroomInfo', params: { id: this.classroom.id } })
        })
        .catch(() => {
          this.enrolmentLoading = false
        })
    },
    onCancel () {
      this.invoice.loading = true
      APIGateway.invoice.cancel(this.invoice.id)
        .then(() => {
          this.invoice.loading = false
          this.$router.push({ name: 'Public.AllClassrooms' })
        })
        .catch(() => {
          this.invoice.loading = false
        })
    },
    onAccept () {
      this.payInvoice()
    },
    amountOfDepositWalletNeeded () {
      return this.invoice.amount - this.wallet.inventory
    },
    payInvoice () {
      if (this.amountOfDepositWalletNeeded() > 0) {
        this.payInvoiceByDepositWallet()
      } else {
        this.payInvoiceByWallet()
      }
    },
    payInvoiceByWallet () {
      this.invoice.loading = true
      APIGateway.invoice.pay(this.invoice.id)
        .then((message) => {
          this.payMessage = message
          this.invoice.loading = false
          if (this.$route.query.source === 'event') {
            this.$router.push({ name: 'UserPanel.Profile.EventInfo', params: { id: this.classroom.id } })
          } else {
            this.$router.push({ name: 'UserPanel.Profile.ClassroomInfo', params: { id: this.classroom.id } })
          }
        })
        .catch(() => {
          this.invoice.loading = false
        })
    },
    payInvoiceByDepositWallet () {
      this.invoice.loading = true
      APIGateway.wallet.deposit({
        amount: this.amountOfDepositWalletNeeded(),
        invoice: this.invoice.id
      })
        .then((url) => {
          window.location.href = url
        })
        .catch(() => {
          this.depositLoading = false
        })
    },
    loadAuthData() { // prevent Hydration node mismatch
      this.user = this.$store.getters['Auth/user']
    },
    getMyWallet () {
      this.wallet.loading = true
      APIGateway.wallet.getMyWallet(this.user.id)
        .then((wallet) => {
          this.wallet = new Wallet(wallet)
          this.wallet.loading = false
          this.walletLoaded = true
        })
        .catch(() => {
          this.wallet.loading = false
        })
    },
    getInvoiceFromStore () {
      this.invoice = this.$store.getters['Shop/registerClassroomInvoice']
    },
    loadClassroomFromStore () {
      this.classroom = this.$store.getters['Shop/onRegisterClassroom']
    },
    checkStoreClassroom () {
      if (this.classroom === null || typeof this.classroom.id === 'undefined' || this.classroom.id === null) {
        this.$router.push({ name: 'Public.AllClassrooms' })
      }
    },
    register () {
      // this.$axios.put(API_ADDRESS.classroom.register(this.classroom.id), {
      //   classroom: this.classroom.id
      // })
      //   .then(() => {
      //     this.$router.push({ name: 'UserPanel.PaymentResult' })
      //   })
    },
    getHoldingType (type) {
      const target = Enums.classroomHoldingTypes.find(item => item.value === type)
      if (target) {
        return target.label
      }
      return '-'
    },
    getAudienceGenderType (type) {
      const target = Enums.genders.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">
.complete-info {
  margin-bottom: 102px;
  .complete-info-top-banner {
    margin-top: 50px;
    margin-bottom: 42px;
  }
  .complete-info-steps-card {
    background-color: #F5F5F5;
    padding: 35px 0;
    border-radius: 8px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    margin-bottom: 44px;
    .complete-info-step {
      display: flex;
      flex-flow: row;
      position: relative;
      width: 20%;
      &:first-child
      &:nth-child(2) {
        .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;
      }
    }
  }
  .info-column {
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    .invoice-info {
      width: 100%;
      max-width: 643px;
      margin-bottom: 40px;
    }
    .payment-card {
      width: 100%;
      max-width: 643px;
    }
  }

  .complete-info-pay-banner {
    margin-bottom: 26px;
  }
  .complete-info-pay-form-card {
    background-color: #F5F5F5;
    padding: 30px;
    border-radius: 8px;
    .complete-info-pay-form-card-title {
      margin-bottom: 22px;
    }
    .product-item {
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      .product-item-title {
        display: flex;
        flex-flow: row;
        .product-item-icon {
          margin-right: 10px;
        }
      }
      .product-item-price {
        svg {
          margin-right: 10px;
        }
      }
    }
  }
  .section-edit-btn {
    margin-top: 50px;
    margin-bottom: 77px;
  }
}
</style>